Element.matches()
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2017年4月.
如果元素被指定的选择器字符串选择，Element.matches() 方法返回 true; 否则返回 false。
警告： 有一些浏览器使用前缀，在非标准名称 matchesSelector () 下实现了这个方法！
语法
js
matches(selectors)
result的值为true或false.selectorString是个 css 选择器字符串。
示例
html
<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>
js
<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() 方法的浏览器，存在以下替代方案
js
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 |
|---|
| DOM # ref-for-dom-element-matches① |
浏览器兼容性
Loading…