Iterar elementos del dom - lizethcas/javascript-universe GitHub Wiki
En muchas ocasiones vamos a necesitar recorrer varios elementos HTML para:
- Mostrar un texto específico.
- Extraer títulos o descripciones.
- Renderizar dinámicamente una lista de imágenes.
- Aplicar estilos o clases a múltiples elementos.
- Leer y manipular atributos, etc.
Para esto usamos métodos que seleccionan múltiples elementos del DOM, pero no todos devuelven el mismo tipo de estructura, y no todos permiten usar directamente métodos como forEach() o map().
A continuación, un resumen con los métodos más comunes para seleccionar elementos y cómo tratarlos:
| Método | Colección devuelta | ¿Es iterable? | ¿forEach() directo? | ¿Conversión a array necesaria? |
|---|---|---|---|---|
document.querySelector() |
Element (único) |
❌ | ❌ | No |
document.querySelectorAll() |
NodeList |
✅ | ✅ | ✅ |
document.getElementById() |
Element (único) |
❌ | ❌ | No |
document.getElementsByClassName() |
HTMLCollection |
❌ | ❌ | ✅ |
document.getElementsByTagName() |
HTMLCollection |
❌ | ❌ | ✅ |
document.getElementsByName() |
NodeList |
✅ | ✅ | No |
document.forms |
HTMLCollection |
❌ | ❌ | ✅ |
document.images |
HTMLCollection |
❌ | ❌ | ✅ |
ℹ️ Nota: Para convertir un
HTMLCollectionoNodeLista array puedes usar:const array = Array.from(collection); // o const array = [...collection];
Siguiente: Búsqueda de elementos
