Elemento matches / matchesSelector

Recentemente, estive pensando sobre elementos e seletores HTML. Normalmente, começamos procurando por um elemento(s) por meio de querySelector/querySelectorAllO que faz sentido, mas e se o senhor quiser validar se um elemento que não foi especificamente selecionado corresponde a um determinado seletor? Por exemplo, digamos que o senhor tenha uma função que pressuponha a presença de classes ou atributos nos elementos que lhe foram passados, e as coisas podem dar errado se o elemento fornecido não se encaixar? Entre Element.matches!

O JavaScript

Como detalha a MDN, Element.matches é a API padrão, mas cada fornecedor implementou uma matchesSelector versão:

function determineIfElementMatches(element, selector) {
	return element.matches(selector);
}

// Sample usage
var matches = determineIfElementMatches(myDiv, 'div.someSelector[some-attribute=true]');

Para contornar toda a confusão do fornecedor, podemos simplesmente usar o Element prototype:

function selectorMatches(el, selector) {
	var p = Element.prototype;
	var f = p.matches || p.webkitMatchesSelector || p.mozMatchesSelector || p.msMatchesSelector || function(s) {
		return [].indexOf.call(document.querySelectorAll(s), this) !== -1;
	};
	return f.call(el, selector);
}

Incluí um polyfill se o navegador não for compatível com o matches mas os navegadores modernos devem suportar a função de alguma forma. Como mencionei no início da postagem, acho que `matches` é provavelmente mais usado como medida de validação, mas se o senhor encontrar usos melhores, me avise!