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 July 2015.
構文
js
matches(selectors)
引数
返値
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
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① |
ブラウザーの互換性
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
matches |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
- Uses a non-standard name.
- Has more compatibility info.
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
関連情報
- CSS セレクターモジュール
- セレクターを使用するその他のメソッド:
element.querySelector()
およびelement.closest()