HTML DOM matches() 方法

简介

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

语法

element.matches(selectors);

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

返回值

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

使用场景

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

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

示例代码

基础示例

// www.javascriptcn.com code example
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>matches() 方法示例</title>
    <style>
        .highlight {
            background-color: yellow;
        }
    </style>
</head>
<body>
    <div id="testDiv">这是一个测试元素</div>
    <button onclick="checkMatch()">点击检查匹配情况</button>

    <script>
        function checkMatch() {
            const div = document.getElementById('testDiv');
            if (div.matches('.highlight')) {
                alert('元素匹配了 .highlight 类');
            } else {
                alert('元素未匹配 .highlight 类');
            }
        }
    </script>
</body>
</html>

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

事件冒泡中的应用

// www.javascriptcn.com code example
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>matches() 方法示例</title>
    <style>
        .highlight {
            background-color: yellow;
        }
    </style>
</head>
<body>
    <div class="container">
        <p>这是一个段落。</p>
        <button>点击我</button>
    </div>

    <script>
        document.querySelector('.container').addEventListener('click', function(event) {
            const target = event.target;

            // 检查目标元素是否匹配 .highlight 类
            if (target.matches('.highlight')) {
                console.log('被点击的元素匹配 .highlight 类');
            } else {
                console.log('被点击的元素不匹配 .highlight 类');
            }

            // 如果点击的是按钮，添加 .highlight 类
            if (target.tagName === 'BUTTON') {
                target.classList.add('highlight');
            }
        });
    </script>
</body>
</html>

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

注意事项

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

相关方法

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

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