Coincidencias de elementos/matchSelector -

Recientemente estuve pensando en elementos y selectores HTML. Por lo general, comenzamos buscando elementos a través de querySelector/ querySelectorAll, lo cual tiene sentido, pero ¿qué sucede si deseas validar que un elemento que no fue seleccionado específicamente coincide con un selector determinado? Por ejemplo, digamos que tiene una función que asume la presencia de clases o atributos en los elementos que se han pasado, y las cosas podrían salir mal si el elemento proporcionado no se ajusta a los requisitos. ¡ Ingresa Element.matches!

JavaScript

Como detalle MDN, Element.matcheses el estándar API pero cada proveedor ha implementado una matchesSelectorversión:

function determineIfElementMatches(element, selector) {return element.matches(selector);}// Uso de muestravar coincidencias = determineIfElementMatches(myDiv, 'div.someSelector[some-attribute=true]');

Para solucionar todo el lío de proveedores, podemos usar el Elementprototipo:

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

He incluido un polyfill si el navegador no es compatible matches, pero los navegadores modernos deben admitir la función de alguna forma. Como mencioné al principio de la publicación, creo que las “coincidencias” probablemente sean las más utilizadas como medida de validación, ¡pero avíseme si ve mejores usos!