Element: matches() メソッド

Baseline 広く利用可能

この機能は広く実装されており、多くのバージョンの端末やブラウザーで動作します。2017年4月以降、すべてのブラウザーで利用可能です。

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!" と表示されます。

仕様書

仕様書
DOM # ref-for-dom-element-matches①

ブラウザーの互換性

MDN の改良に協力

協力方法を知る

このページは MDN の貢献者によって 2025年11月9日に最終更新されました。

GitHub でこのページを表示 • このコンテンツに関する問題を報告