Element.matches în JavaScript

element.matches(selectorCss)

Ce face Element.matches

matches returnează true dacă elementul ar fi selectat de selectorul dat. Acceptă orice selector CSS, inclusiv pseudo-clase ca :checked, :hover, :disabled sau :focus-visible.

Este util în delegarea evenimentelor, când vrei să verifici exact elementul pe care s-a dat clic (pentru a urca spre părinți folosește closest).

Parametri

Parametru	Descriere
selectorCss	Un selector CSS.

Ce returnează

true sau false.

Exemple

Exemplul 1: Verificări cu selectoare

<button class="btn principal" disabled>Trimite</button>
<input type="checkbox" id="termeni" checked>

<script>
  const btn = document.querySelector(".btn");
  console.log(btn.matches(".principal"), btn.matches(".btn:disabled"), btn.matches("a"));
  console.log(document.getElementById("termeni").matches(":checked"));
</script>

Rezultat în browser

true true false
true

Greșeli frecvente

• Dai un selector invalid (de exemplu ".2coloane") și primești SyntaxError.

Comenzi înrudite

• Element.closest: Urcă de la element spre părinți și returnează primul care se potrivește cu un selector CSS.
• document.querySelector: Găsește primul element din pagină care se potrivește cu un selector CSS.
• classList: Adaugă, scoate sau comută clase CSS pe un element.