Seleccionar Elementos por Etiqueta en JavaScript

Cuando trabajamos con el DOM en JavaScript, una de las tareas más comunes es seleccionar elementos para manipularlos. Si necesitas obtener todos los elementos de un tipo específico (como todos los <p>, <div>, <li>, etc.), el método getElementsByTagName() es una opción eficiente.

Este método permite seleccionar todos los elementos que coincidan con una etiqueta HTML, devolviendo una colección de nodos que pueden ser recorridos y modificados según sea necesario.

En este artículo exploraremos cómo funciona getElementsByTagName(), sus ventajas y limitaciones y cómo usarlo en diferentes escenarios.

¿Qué es y cómo funciona getElementsByTagName?

El método getElementsByTagName() permite seleccionar todos los elementos de una etiqueta específica dentro del documento o de un contenedor en particular. A diferencia de getElementById, que selecciona solo un elemento, este método devuelve una colección con todos los elementos que coinciden con la etiqueta especificada.

document.getElementsByTagName("etiqueta");

O para seleccionar dentro de un elemento específico:

elementoPadre.getElementsByTagName("etiqueta");

• etiqueta: Es el nombre de la etiqueta HTML que se desea seleccionar ("p", "div", "span", etc.).
• Retorna: Una colección HTMLCollection con todos los elementos encontrados.

<p>Primer párrafo</p>
<p>Segundo párrafo</p>
<p>Tercer párrafo</p>

<script>
  const parrafos = document.getElementsByTagName("p");
  console.log(parrafos); // HTMLCollection(3) [p, p, p]
</script>

El método devuelve una HTMLCollection con todos los párrafos del documento.

¿Cuándo usar getElementsByTagName?

El método getElementsByTagName() es útil en situaciones donde:

• Necesitas seleccionar todos los elementos de un tipo específico, como todas las filas de una tabla (<tr>) o todas las imágenes (<img>).
• Quieres recorrer una lista de elementos para modificar su contenido o estilos.
• Necesitas seleccionar elementos dentro de un contenedor específico.

Ejemplo: Cambiar el Color de Todos los Párrafos

<p>Este es el primer párrafo.</p>
<p>Este es el segundo párrafo.</p>
<p>Este es el tercer párrafo.</p>
<button onclick="resaltarParrafos()">Resaltar</button>

<script>
  function resaltarParrafos() {
    const parrafos = document.getElementsByTagName("p");

    for (const parrafo of parrafos) {
      parrafo.style.backgroundColor = "yellow";
    }
  }
</script>

En el ejemplo anterior cada <p> de la página cambia su color de fondo a amarillo al hacer clic en el botón.

Limitaciones y Errores Comunes

Aunque getElementsByTagName() es una herramienta útil, tiene algunas limitaciones que debes conocer:

1. Devuelve una HTMLCollection, No un Array

El método getElementsByTagName() devuelve una colección en vivo (HTMLCollection), lo que significa que no es un array verdadero y no puedes usar directamente métodos como map() o forEach().

const parrafos = document.getElementsByTagName("p");
parrafos.forEach(parrafo => parrafo); // ❌ Error

Solución: Convierte la HTMLCollection en un array antes de manipularla.

const parrafosArray = Array.from(document.getElementsByTagName("p"));
parrafosArray.forEach(parrafo => parrafo.textContent); // ✅ Funciona correctamente

2. Si No Hay Elementos Coincidentes, Devuelve una Lista Vacía

Si la etiqueta especificada como argumento no existe en el documento, el método no lanza un error, sino que devuelve una colección vacía.

const elementos = document.getElementsByTagName("section");
elementos.length; // 0 si no hay elementos <section>

Solución: Siempre verifica si la colección tiene elementos antes de manipularlos:

if (elementos.length > 0) {
  return "Hay elementos en la colección.";
} else {
  return  "No se encontraron elementos con esa etiqueta.";
}

3. La Colección en Vivo se Actualiza Dinámicamente

Dado que el elemento getElementsByTagName() devuelve una colección en vivo, si agregas o eliminas elementos en el DOM, la colección se actualizará automáticamente.

const lista = document.getElementsByTagName("li");
console.log(lista.length); // 3

// Agregar un nuevo elemento
const nuevoItem = document.createElement("li");
nuevoItem.textContent = "Nuevo ítem";
document.querySelector("ul").appendChild(nuevoItem);

console.log(lista.length); // Ahora la longitud será 4

Consideración: Si necesitas una colección estática que no cambie, usa querySelectorAll() en su lugar.

Métodos Alternativos a getElementsByTagName

Si bien getElementsByTagName() es eficiente, existen otras formas de seleccionar elementos:

• Si necesitas seleccionar elementos de una etiqueta, pero con más flexibilidad, querySelectorAll() es una mejor opción. A diferencia de getElementsByTagName(), este método devuelve una NodeList estática, lo que significa que no se actualiza dinámicamente.
• getElementsByClassName() Si los elementos tienen una clase en común, puedes seleccionarlos con.

Ejemplo: Seleccionar y Modificar Todas las Imágenes en una Página

const imagenes = document.getElementsByTagName("img");

for (const img of imagenes) {
  img.style.border = "2px solid red";
}

En el ejemplo anterior se agregan bordes rojos a todas las imágenes en la página.

Conclusión

El método getElementsByTagName() es una herramienta eficaz para seleccionar múltiples elementos del mismo tipo en el DOM. Su uso es ideal cuando necesitas trabajar con listas de elementos como párrafos, imágenes, filas de tablas o botones.

En este artículo hemos aprendido: Cómo funciona getElementsByTagName() y su sintaxis.
✅ Sus ventajas y limitaciones.
✅ Alternativas como querySelectorAll() y getElementsByClassName().
✅ Casos prácticos como modificar estilos, contar elementos y recorrer listas de nodos.

Aunque getElementsByTagName() es rápido y eficiente, su naturaleza dinámica puede generar ciertos problemas si no se maneja correctamente.