From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/zh-cn/web/api/element/matches/index.html | 117 +++++++++++++++++++++++++ 1 file changed, 117 insertions(+) create mode 100644 files/zh-cn/web/api/element/matches/index.html (limited to 'files/zh-cn/web/api/element/matches') diff --git a/files/zh-cn/web/api/element/matches/index.html b/files/zh-cn/web/api/element/matches/index.html new file mode 100644 index 0000000000..24d5c682ff --- /dev/null +++ b/files/zh-cn/web/api/element/matches/index.html @@ -0,0 +1,117 @@ +--- +title: Element.matches() +slug: Web/API/Element/matches +tags: + - Element.matches() + - js-30-days + - matches() +translation_of: Web/API/Element/matches +--- +

{{APIRef("DOM")}}

+ +

如果元素被指定的选择器字符串选择，Element.matches()  方法返回true; 否则返回false。

+ +
+

有一些浏览器使用前缀, 在非标准名称  matchesSelector () 下实现了这个方法!

+
+ +

语法

+ +
let result = element.matches(selectorString);
+
+ + + +

例子

+ +
<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 {{ gecko_minversion_inline("2.0") }}
+
如果给定的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的补充:

+ + +
+ +

规范

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Selectors API Level 2', '#matches', 'Element.matches')}}{{Spec2('Selectors API Level 2')}}Initial definition.
+ +

浏览器兼容性

+ + + +

{{Compat("api.Element.matches")}}

-- cgit v1.2.3-54-g00ecf