Element.matches()

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨abril de 2017⁩.

O métodoElement.matches() retorna verdadeiro se o elemento puder ser selecionado pela sequência de caracteres específica; caso contrário retorna falso.

Aviso:Diversos navegadores implementam isto, prefixado, sob nome não padronizadomatchesSelector().

Sintaxe

var result = element.matches(selectorString);

result contém o valor de retorno true ou false.
selectorString é uma string representando o seletor para teste.

Exemplo

html

<ul>  <li>Orange-winged parrot</li>  <li>Philippine eagle</li>  <li>Great white pelican</li></ul><script type="text/javascript">  var birds = document.getElementsByTagName("li");  for (var i = 0; i < birds.length; i++) {    if (birds[i].matches(".endangered")) {      console.log("The " + birds[i].textContent + " is endangered!");    }  }</script>

Isto irá logar "The Philippine eagle is endangered!" para o console, desde que o elemento tenha de fato um atributo de classe com o valorendangered.

Exceções

SYNTAX_ERR: O seletor de string específico é inválido.

Polyfill

Para navegadores que não suportamElement.matches() ouElement.matchesSelector(), mass possuem suporte paradocument.querySelectorAll(), existe um polyfill:

if (!Element.prototype.matches) {    Element.prototype.matches =        Element.prototype.matchesSelector ||        Element.prototype.mozMatchesSelector ||        Element.prototype.msMatchesSelector ||        Element.prototype.oMatchesSelector ||        Element.prototype.webkitMatchesSelector ||        function(s) {            var matches = (this.document || this.ownerDocument).querySelectorAll(s),                i = matches.length;            while (--i >= 0 && matches.item(i) !== this) {}            return i > -1;        };}