如果元素被指定的选择器字符串选择,Element.matches()
方法返回true; 否则返回false。
有一些浏览器使用前缀, 在非标准名称 matchesSelector () 下实现了这个方法!
语法
let result = element.matches(selectorString);
result
的值为true
或false
.selectorString
是个css选择器字符串.
例子
<ul id="birds">
<li>Orange-winged parrot</li>
<li class="endangered">Philippine eagle</li>
<li>Great white pelican</li>
</ul>
<script type="text/javascript">
var birds = document.getElementsByTagName('li');
for (var i = 0; i < birds.length; i++) {
if (birds[i].matches('.endangered')) {
console.log('The ' + birds[i].textContent + ' is endangered!');
}
}
</script>
<div id="foo">This is the element!</div>
<script type="text/javascript">
var el = document.getElementById("foo");
if (el.mozMatchesSelector("div")) {
alert("Match!");
}
</script>
会显示弹出框,因为"div"选择器可以选择到el元素.
异常
SYNTAX_ERR
- 如果给定的css选择器无效. 在 Gecko 2.0之前,该方法会返回
false,2.0之后
,会直接抛出异常.
替代方案(Polyfill)
对于不支持 Element.matches()
或Element.matchesSelector(),但支持
document.querySelectorAll()方法的浏览器,存在以下替代方案
if (!Element.prototype.matches) {
Element.prototype.matches =
Element.prototype.matchesSelector ||
Element.prototype.mozMatchesSelector ||
Element.prototype.msMatchesSelector ||
Element.prototype.oMatchesSelector ||
Element.prototype.webkitMatchesSelector ||
function(s) {
var matches = (this.document || this.ownerDocument).querySelectorAll(s),
i = matches.length;
while (--i >= 0 && matches.item(i) !== this) {}
return i > -1;
};
}
关于Polyfill的补充:
规范
Specification | Status | Comment |
---|---|---|
Selectors API Level 2 Element.matches |
Obsolete | Initial definition. |
浏览器兼容性
BCD tables only load in the browser
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.