Element: matches() 方法

Baseline 已廣泛支援

該特性已非常成熟，可在多種裝置和瀏覽器版本上使用。自 2017 年 4 月以來，它已在各大瀏覽器上可用。

Element 介面的 matches() 方法用於測試該元素是否會匹配指定的 CSS 選擇器。

語法

matches(selectors)

引數

選擇器 (selectors): 包含有效 CSS 選擇器的字串，用於與 Element 進行匹配測試。

返回值

如果 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!`);
  }
}

這將會在控制檯輸出 "The Philippine eagle is endangered!"，因為該元素確實有一個值為 endangered 的 class 屬性。

規範

規範
DOM # ref-for-dom-element-matches①

瀏覽器相容性

另見

CSS 選擇器模組
其他接受選擇器的 Element 方法：Element.querySelector()、Element.querySelectorAll() 和 element.closest()。

幫助改進 MDN

瞭解如何貢獻

此頁面最後由 MDN 貢獻者於 2024年12月19日修改。

在 GitHub 上檢視此頁面 • 報告此內容的問題