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í!