Web Advent Calendar 2024

element.matches

To check if a DOM node has a certain CSS class, you can use the classList.contains() method. Nice to know: the method takes multiple arguments, and returns true if one of the given parameters is contained in the classList.

const elem = document.querySelector('main');
// true or false
elem.classList.contains('article-header')
// true if one of the arguments is in the classList
elem.classList.contains('article-header', 'article-footer')

But there is a more flexible way: you can check, if the element matches any of a given CSS selector. Including argument selectors or pseudo selectors.

const elem = document.querySelector('main');
// true or false
elem.matches('.article-header');
elem.matches('.article-header, .article-footer')
elem.matches('[class^="article-"]')
elem.matches('[class*="article"]')
elem.matches(':empty')

Source: https://developer.mozilla.org/en-US/docs/Web/API/Element/matches