HTML - DOM 元素 matches() 方法

matches() 方法检查元素是否匹配给定的 CSS 选择器，如果匹配则返回 true，否则返回 false。

语法

element.matches(selectorString);

参数

参数	描述
selectorString	指定要测试的元素的 CSS 选择器。

返回值

matches() 方法的返回值是布尔值；如果元素匹配提供的 CSS 选择器，则返回 true，否则返回 false。

HTML DOM 元素 'matches()' 方法示例

以下是 matches() 方法的一些示例，这些示例在 HTML DOM 元素中不同上下文中比较节点。

检查 p 是否匹配选择器

此示例演示如何使用 matches() 方法来检查元素是否匹配提供的 CSS 选择器。代码将 highlight 类添加到<p> 元素，从而更改其背景颜色。<span> 元素与选择器不匹配，因此保持不变。

<!DOCTYPE html>
<html>
<head> 
    <style>
    .highlight {
        background-color: yellow;
    }
    </style>
</head>

<body>
    <h1>HTML - DOM Element</h1>
    <h2>matches() Method</h2>
    <p>It compares an element and applies styles 
        if they match...
    </p>
    
    <div id="container">
        <p>Hello, world!</p>
        <span>Not a paragraph</span>
    </div>
    <p>The <span> does not match p selector, 
        so no .highlight is added.
    </p>
    
    <script>
        // Select the <p> element inside #container
        const container = document.getElementById('container');
        const paragraph = container.querySelector('p');
    
        // Checks if paragraph matches the 'p' and adds highlight 
        if (paragraph.matches('p')) { 
            paragraph.classList.add('highlight');
        }
    </script>
</body>

</html>

使用 'matches()' 进行按钮高亮显示

此示例演示 'matches()' 方法如何检查被点击的元素是否匹配按钮选择器，并特别对按钮应用高亮类。

<!DOCTYPE html>
<html>
<head> 
    <style>
        .highlight {
            background-color: lightgreen;
        }
    </style>
</head>

<body>
    <h1>HTML - DOM Element</h1>
    <h2>matches() Method</h2>
    <p> Highlights the button because the button 
        element matches the given CSS selector.
    </p>
    
    <div id="container">
        <button>Click Me</button>
        <p>Click target will be highlighted.</p>
    </div>
    
    <script>
        document.addEventListener('click', function(event) {
            if (event.target.matches('button')) {
                event.target.classList.add('highlight');
                const message = document.createElement('p');
                message.textContent = 'Button clicked: ' 
                + event.target.textContent;
                document.body.appendChild(message);
            }
        });
    </script>
</body>

</html>

支持的浏览器

方法
matches()	支持 33	支持 15	支持 34	支持 7	支持 21

html_dom_element_reference.htm

打印页面