es muy normal agregar atributos a los elementos dentro de nuestras aplicaciones o páginas web y hay momentos donde necesitamos ncontrar todos los elementos con un mismo atributo de manera rápida y eficaz; es por ello que en éste post lo vamos a explicar de manera tan sencilla.
Hallar elementos con atributos en Javascript
Supongamos que tenemos un documento HTML que contiene elementos con atributos diferentes. Entonces ahora queremos encontrar todos los elementos con un atributo. Javascript nos permite realizar tal tarea de manera fácil. A continuación el cóigo ejemplo:
const elems = document.querySelectorAll('*[class]');
elems.forEach((element) => {
console.log(element.className);
});
El código anterior utiliza querySelectorAll para seleccionar todos los elementos en el documento que tienen el atributo class definido sin importar el nombre de cada clase. La línea const elems = document.querySelectorAll('*[class]'); crea una colección de nodos llamada elems, que contiene todos estos elementos.
Luego, utilizamos un bucle forEach para iterar sobre cada elemento en la colección elems y mostramos el nombre de la clase de cada elemento en la consola utilizando console.log(element.className);.
Este sería un ejemplo de un documento en donde accedemos a todos los elementos con un atributo con Javascript.
<html>
<body>
<p class="texto"> </p>
<div class="cuadro"> </div>
<script>
const elems = document.querySelectorAll('*[class]');
elems.forEach((element) => {
console.log(element.className);
});
</script>
</body>
</html>
Encontrar elementos con un mismo atributo
En la siguiente situación tenemos varios elementos y algunos de ellos comparten los mismos atributos; entonces la solución sería la siguiente.
const reds = document.querySelectorAll('*[class="red"]');
reds.forEach((element) => {
// Realizar acciones con los elementos seleccionados
});
El código anterior utiliza querySelectorAll para seleccionar todos los elementos en el documento que tienen una clase específica llamada "red". La línea const reds = document.querySelectorAll('*[class="red"]'); crea una colección de nodos llamada reds, que contiene todos los elementos con esa clase.
Luego, podemos utilizar un bucle forEach para iterar sobre cada elemento en la colección reds y realizar las acciones que deseemos con ellos. Por ejemplo, podríamos cambiar el estilo de los elementos, agregar o eliminar contenido, o cualquier otra manipulación que necesitemos hacer emn el documento.
Seleccionar elementos que no tiene un atributo
En caso que lo que deseamos es buscar un elemento que no posee un atributo entonces podemos usar el siguiente código.
const notRed = document.querySelectorAll('div:not(.red)');
notRed.forEach((element) => {
// Realizar acciones con los elementos seleccionados
});
El código anterior utiliza el selector :not(.red) en conjunto con querySelectorAll para seleccionar todos los elementos div en el documento que no tienen la clase "red". La línea const notRed = document.querySelectorAll('div:not(.red)'); crea una colección de nodos llamada notRed, que contiene todos los elementos div que no tienen la clase "red".
Espero que los ejemplos javascript anteriores te permitan encontrar todos los elementos con un mismo atributo en Javascript y resolver tu tarea.