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.querySelectorAllpara seleccionar todos los elementosdentro de los elementos con la clasemyclass: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
getElementsByClassNamepara obtener todos los elementos con la clasemyclass, y luego usargetElementsByTagNamepara 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.