І це —
Element.matches, який просто перевіряє елемент, на якому він викликаний, на предмет відповідності селектору:<div class="container">
<div class="my-element"></div>
</div>
<script>
el.matches('.container .my-element'); // true
</script>
Якщо повного співпадіння не буде, то й поверне він false:
el.matches('.container'); // falseНа відміну від closest, matches перевіряє суто цільовий елемент і не шукає інших збігів. Звичайно, якщо обом методам дати однаковий і точний селектор — обидва спрацюють позитивно. Але якщо селектор “не точний”, closest цілком може повернути когось із батьків, а от matches скаже чітке “ні”.
Поки ми тут, не забудьте поставити вподобайку та поширити допис ;)
Що цікаво, обидва методи працюють зі складними селекторами, включно з псевдокласами, тобто чудово справляться з отаким:
:not(.container:first-child):hover .my-element
Але у випадку з тим же :not можуть бути нюанси. Коли я бавився з цим прикладом, то селектор вище чудово спрацьовував, а от ось такий:
.container:not(:first-child):hover .my-element
уже чомусь ні, хоча в CSS цей селектор працює без проблем
Тож, якщо вам потрібно просто дізнатися, чи елемент відповідає селектору, і нічого більше, то ваш вибір — matches. Уявіть, що вам потрібно видалити елемент, тільки якщо він знаходиться в третьому за порядком section, але лише в тому випадку, якщо цей section має інші подібні елементи, а потрібний елемент — не останній.
Звичними нам методами це вимагало б купу переборів DOM і перевірок, а так — один кучерявий селектор і справу зроблено!
Підтримується абсолютно всіма актуальними бравзерами і є частиною Baseline.
🔗 MDN
⚡️@babichdev
***
P.S. До речі, ви вже взяли участь в розіграші квитка на DOU Day усього за 500 гривень? Якщо ні — не зволікайте!