Element.matches()

The matches() method of the Element interface tests whether the element would be selected by the specified CSS selector.

Syntax

matches(selectorString)

Parameters

selectors

A string of valid CSS selector to test the Element against.

Return value

true if the Element matches the selectors. Otherwise, false.

Exceptions

SyntaxError DOMException

Thrown if the selectors is not a valid CSS selector.

Examples

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

This will log "The Philippine eagle is endangered!" to the console, since the element has indeed a class attribute with value endangered.

Specifications

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

Browser compatibility

BCD tables only load in the browser

See also