Coincidencias de elementos/matchSelector - » HostIN

• HostIN
• Programación
• Coincidencias de elementos/matchSelector -

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!

• Cómo WebDevStudios simplifica las migraciones de Elementor para clientes empresariales
• establecer el foco al final de la línea -

Te podría interesar...

Deshabilitar el uso excesivo de recursos de LFD Actualización de cPanel ClamAV | ¿Cómo hacerlo? GoDaddy obtiene una nueva patente para la sugerencia de dominio 5 nuevas e impresionantes tecnologías de Mozilla de las que nunca has oído hablar - Alojamiento compartido estable en EE. UU., Soporte 24/7 Error repositorio desconocido EPEL | Resuelto Cómo acceder al archivo .Htaccess oculto en cPanel> Blog de eWebGuru Yoast SEO ¿Qué hacer, qué no hacer? Bienvenido a mi oficina -

Deja una respuesta Cancelar la respuesta

Lo siento, debes estar conectado para publicar un comentario.