Element: matches() メソッド

matches() は Element インターフェイスのメソッドで、この要素が指定した CSS セレクターによって選択されるかどうかを検査します。

構文

matches(selectors)

引数

selectors: Element を検査するために有効な CSS セレクターを格納した文字列です。

返値

Element が selectors に一致すれば true です。そうでなければ false です。

例外

SyntaxError DOMException: selectors が CSS のセレクターリストとして解釈できない場合に発生します。

例

HTML

html

<ul id="birds">
  <li>Orange-winged parrot</li>
  <li class="endangered">Philippine eagle</li>
  <li>Great white pelican</li>
</ul>

JavaScript

const birds = document.querySelectorAll("li");

for (const bird of birds) {
  if (bird.matches(".endangered")) {
    console.log(`The ${bird.textContent} is endangered!`);
  }
}

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

仕様書

Specification
DOM Standard # ref-for-dom-element-matches①

ブラウザーの互換性

BCD tables only load in the browser