HTML DOM matches() 方法

简介

matches() 方法是 HTML DOM 中的一个方法，用于检查一个元素是否匹配某个 CSS 选择器。此方法可以用来检测一个元素是否满足特定的 CSS 规则，从而实现更复杂的 DOM 操作和事件处理逻辑。

语法

element.matches(selectors);

• element：需要检测的 DOM 元素。
• selectors：一个表示 CSS 选择器的字符串。

返回值

• 如果元素匹配提供的选择器，则返回 true。
• 如果元素不匹配提供的选择器，则返回 false。

使用场景

matches() 方法常用于以下场景：

• 事件冒泡：在事件处理函数中，确定事件触发的元素是否满足特定条件。
• 样式检查：在脚本中检查元素是否符合特定的 CSS 类或 ID。
• 动态样式应用：根据元素是否匹配某些条件来动态改变其样式。

示例代码

基础示例

-- -------------------- ---- -------
--------- -----
----- ----------
------
    ----- ----------------
    ----- --------------- ---------------------------- -------------------
    ---------------- ------------
    -------
        ---------- -
            ----------------- -------
        -
    --------
-------
------
    ---- ---------------------------
    ------- ----------------------------------------

    --------
        -------- ------------ -
            ----- --- - -----------------------------------
            -- --------------------------- -
                ------------ ---------- ----
            - ---- -
                ------------ ---------- ----
            -
        -
    ---------
-------
-------

在这个例子中，我们创建了一个按钮，当用户点击该按钮时，会检查一个具有特定 ID 的元素是否匹配 .highlight 类。如果匹配，则弹出一个警告框，告知用户该元素匹配了 .highlight 类。

事件冒泡中的应用

-- -------------------- ---- -------
--------- -----
----- ----------
------
    ----- ----------------
    ----- --------------- ---------------------------- -------------------
    ---------------- ------------
    -------
        ---------- -
            ----------------- -------
        -
    --------
-------
------
    ---- ------------------
        --------------
        --------------------
    ------

    --------
        -------------------------------------------------------------- --------------- -
            ----- ------ - -------------

            -- ---------- ---------- -
            -- ------------------------------ -
                --------------------- ---------- ----
            - ---- -
                ---------------------- ---------- ----
            -

            -- ----------- ---------- -
            -- --------------- --- --------- -
                ----------------------------------
            -
        ---
    ---------
-------
-------

在这个例子中，我们在容器上绑定了一个点击事件监听器。当用户点击容器内的任何元素时，都会检查这个元素是否匹配 .highlight 类。如果点击的是按钮，则给该按钮添加 .highlight 类，使其背景变为黄色。

注意事项

• matches() 方法并不是所有浏览器都支持，尤其是旧版本的浏览器。因此，在使用此方法时，请确保检查浏览器兼容性或使用 polyfill 来保证兼容性。
• 为了提高兼容性，你可以使用 document.documentElement.matches 或者通过引入 polyfill 库（例如 matches-selector）来确保方法在所有浏览器中都能正常工作。

相关方法

• closest(selector)：返回匹配指定选择器的最近祖先元素（包括自身）。如果没有找到匹配的元素，则返回 null。
• querySelector(selectors)：返回文档中匹配指定 CSS 选择器的第一个元素。
• querySelectorAll(selectors)：返回文档中匹配指定 CSS 选择器的所有元素的 NodeList。

通过这些方法，可以实现更加灵活和强大的 DOM 操作。