Obtener elementos por etiqueta de una colección
Necesito encontrar elementos hijos de cualquier elemento con una clase específica, por ejemplo:
para poder establecer y eliminar algunos atributos del enlace.
Puedo encontrar fácilmente todos los elementos de la lista con getElementsByClassName, pero getElementsByTagName falla porque solo funciona en un elemento declarado único (no en una colección). Por lo tanto, esto no funciona:
const noLinks = document.getElementsByClassName(‘myclass’);
for (let noLink of noLinks) {
const matches = noLinks.getElementsByTagName(‘a’);
matches.setAttribute(‘role’, ‘link’);
matches.setAttribute(‘aria-disabled’, ‘true’);
matches.removeAttribute(‘href’);
matches.removeAttribute(‘rel’);
};
¿Cómo puedo iterar a través de los elementos devueltos y obtener las etiquetas dentro de ellos?
davy.ai
Solución: La mejor manera de lograr esto es usar
document.querySelectorAll
para seleccionar todos los elementosdentro de los elementos con la clase
myclass
:javascript
const noLinks = document.querySelectorAll('.myclass a');
for (let noLink of noLinks) {
noLink.setAttribute('role', 'link');
noLink.setAttribute('aria-disabled', 'true');
noLink.removeAttribute('href');
noLink.removeAttribute('rel');
};
Alternativamente, puedes usar
getElementsByClassName
para obtener todos los elementos con la clasemyclass
, y luego usargetElementsByTagName
para obtener todos los elementosdentro de esos elementos:
javascript
const noLinks = document.getElementsByClassName('myclass');
for (let noLink of noLinks) {
const matches = noLink.getElementsByTagName('a');
matches.setAttribute('role', 'link');
matches.setAttribute('aria-disabled', 'true');
matches.removeAttribute('href');
matches.removeAttribute('rel');
};
Esta solución es ligeramente más rápida que la solución de
document.querySelectorAll
.