JavaScript中matches和match方法

明月落乌江

已于 2023-04-24 19:54:13 修改

阅读量3.2k

点赞数 1

于 2022-04-26 21:05:45 首次发布

本文链接：https://blog.csdn.net/qq_54334713/article/details/124437077

版权

javascript

matches方法用于检查DOM元素是否匹配特定的CSS选择器。在事件委托中尤其有用，例如在给定的HTML和JavaScript代码示例中，当点击事件触发且目标元素匹配'a.btn'选择器时，会阻止默认行为并打印消息。match方法在字符串中查找匹配项，返回匹配的字符串。本文介绍了matches和match方法的区别，并展示了它们在实际应用中的例子。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

matches

主要是用来判断当前DOW节点是否能完全匹配对应的CSS选择器，如果匹配成功，返回true，反之则返回false

语法如下：

element.mathces(seletor);

这个方法在我们做事件委托时就显得非常有用，示例代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
 
    <div id="wrap">
        <a class="btn" href="http://www.baidu.com">点击连接</a>
        <span class="btn">不可点击按钮</span>
    </div>
 
<script>
    document.querySelector('#wrap').addEventListener('click', function (e) {
        if (e.target.matches('a.btn')) {
            e.preventDefault();
           console.log('a.btn');   
        }
    }, false);
</script>
</body>
</html>

match

match() 方法可在字符串内检索指定的值，或找到一个或多个正则表达式的匹配。

该方法类似 indexOf() 和 lastIndexOf()，但是它返回指定的值，而不是字符串的位置

var str="Hello world!"
console.log(str.match("world"))

结果：

后记

本文个人学习总结，内容均来自网络，仅供学习。