Element.matches()
åºçº¿
广æ³å¯ç¨
èª 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 çè¡¥å ï¼
è§è
| è§è |
|---|
| DOM > # ref-for-dom-element-matchesâ > |