Element se shoduje / odpovídáSelector

Nedávno jsem přemýšlel o HTML prvcích a selektorech. Obvykle začínáme hledáním prvku (prvků) pomocí querySelector /querySelectorAll , což dává smysl, ale co když chcete ověřit, že prvek, který nebyl konkrétně vybrán, odpovídá danému selektoru? Řekněme například, že máte funkci, která předpokládá přítomnost tříd nebo atributů v prvcích, které byly předány, a může se stát, že se něco pokazí, pokud poskytnutý prvek nebude odpovídat účtu? Zadejte Element.matches !

JavaScript

Jako podrobnosti o MDN Element.matches je standardní API, každý dodavatel však implementoval matchesSelector verze:

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

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

Abychom se vyhnuli veškerému nepořádku s dodavateli, stačí použít Element prototyp:

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);
}

Pokud prohlížeč nepodporuje matches, zahrnul jsem polyfill ale moderní prohlížeče by měly tuto funkci v nějaké formě podporovat. Jak jsem zmínil na začátku příspěvku, myslím, že `matches` je pravděpodobně nejpoužívanější jako ověřovací opatření, ale dejte mi vědět, pokud uvidíte lepší využití!