¿Hay alguna forma de obtener el argumento de cadena de document.querySelector en JavaScript?
Por ejemplo, digamos que tengo este selector existente:
const myElement = document.querySelector("div[some-complicated=selector]"); ¿Hay alguna forma de obtener solo "div[some-complicated=selector]" de myElement ?
Sé que teóricamente podría poner el selector en una variable y luego pasar la variable a querySelector , luego hacer referencia a esa variable en otro lugar. Pero me gustaría evitar hacer eso si es posible.
Mi caso de uso real es la delegación de eventos; Quiero evitar repetir el mismo selector. Así que actualmente estoy haciendo:
document.querySelectorAll("[data-component=tabs]").forEach((element) => { const tabs = element.querySelectorAll("[role=tab]"); document.addEventListener("click", (event) => { if(!(event.target.matches("[role=tab]") && event.path.indexOf(element) > -1)) { return; } // Do stuff... }); }); Básicamente, quiero extraer la cadena selectora de querySelectorAll para poder pasarla al método de matches , pero sin tener que variabilizar [role=tab] .
De acuerdo, el comentario de @Teemu me envió por un agujero de conejo y encontré una forma indirecta de hacerlo a través de Element.attributes . No es bonito y realmente no me ahorra nada de la verbosidad que estaba tratando de evitar al no simplemente variar la cadena del selector, pero por el bien del experimento mental, pensé que publicaría una solución aquí (pude ver que tiene uso práctico en algunos casos, pero realmente debería haber una API nativa para esto).
Esencialmente, puedo reconstruir un selector uniendo todos los atributos en forma de un selector CSS.
Array.from(element.attributes).map((attribute) => `[${attribute.name}='${attribute.value}']`).join(""); O si usa querySelectorAll como en mi ejemplo real:
Array.from(elements[0].attributes).map((attribute) => `[${attribute.name}='${attribute.value}']`).join("");Tenga en cuenta que esto no recrea el selector que realmente se usó para consultar el elemento, sino que crea un selector a partir de todos los atributos del elemento dado, lo cual es un fastidio. Pero en mi ejemplo de delegación de eventos esto sería suficiente.
Sin embargo, en teoría, incluso podría reducirlo a atributos específicos (por ejemplo, role ), o simplemente pasar por classList en lugar de todos los attributes . Por ejemplo:
Array.from(elements.classList).map((className) => `.${className}`).join("");Como dije, realmente no me ayuda, pero responde la pregunta.