このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docsコミュニティーについてもっと知り、仲間になるにはこちらから。
Element: matches() メソッド
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2017年4月.
matches() はElement インターフェイスのメソッドで、この要素が指定したCSS セレクター によって選択されるかどうかを検査します。
構文
js
matches(selectors)引数
返値
Element がselectors に一致すればtrue です。そうでなければfalse です。
例外
SyntaxErrorDOMExceptionselectorsが CSS のセレクターリストとして解釈できない場合に発生します。
例
HTML
html
<ul> <li>Orange-winged parrot</li> <li>Philippine eagle</li> <li>Great white pelican</li></ul>JavaScript
js
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 # ref-for-dom-element-matches① |
ブラウザーの互換性
関連情報
- CSS セレクターモジュール
- セレクターを使用するその他のメソッド:
element.querySelector()およびelement.closest()