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/ja/web/api/element/matches/index.html | 120 ++++++++++++++++++++++++++++ 1 file changed, 120 insertions(+) create mode 100644 files/ja/web/api/element/matches/index.html (limited to 'files/ja/web/api/element/matches') diff --git a/files/ja/web/api/element/matches/index.html b/files/ja/web/api/element/matches/index.html new file mode 100644 index 0000000000..64ab126b2b --- /dev/null +++ b/files/ja/web/api/element/matches/index.html @@ -0,0 +1,120 @@ +--- +title: Element.matches() +slug: Web/API/Element/matches +tags: + - API + - DOM + - Element + - Method + - Reference + - msMatchesSelector + - webkitMatchesSelector +translation_of: Web/API/Element/matches +--- +

{{APIRef("DOM")}}

+ +

matches() メソッドは、その要素 ({{domxref("Element")}}) が指定された selectorString によって選択されるかをチェックします。言い換えれば、要素「が」セレクターであることをチェックします。

+ +

構文

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

引数

+ +

selectorString は、テストするためのセレクターを表す文字列です。

+ +

返値

+ +

result は {{domxref("Boolean")}} です。

+ +

例外

+ +
+
SYNTAX_ERR
+
指定されたセレクター文字列が無効である場合。
+
+ +

例

+ +
<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>
+
+ +

要素が実際に値 endangered 持つ class 属性を持つので、これは、コンソールのログに "The Philippine eagle is endangered!" と表示されます。

+ +

ポリフィル

+ +

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;
+      };
+}
+ +

しかし、古いブラウザーに対応することの実用性を考えると、実用的なケース (言い換えると IE9 以降の対応) ではほとんどの場合 (全部ではない)、次のもので十分です。

+ +
if (!Element.prototype.matches) {
+  Element.prototype.matches = Element.prototype.msMatchesSelector ||
+                              Element.prototype.webkitMatchesSelector;
+}
+
+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('DOM WHATWG', '#dom-element-matches', 'Element.prototype.matches')}}{{Spec2('DOM WHATWG')}}初回定義
+ +

ブラウザーの互換性

+ + + +

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

+ +

関連情報

+ + -- cgit v1.2.3-54-g00ecf