logo

Introducción a HTMLCollection en JavaScript

Un HTMLCollection es un objeto similar a una matriz que representa una colección de elementos HTML extraídos del documento. Siempre es en vivo y pedido , lo que significa que las modificaciones al DOM se aplican automáticamente a los elementos de la colección.

En este artículo, veremos HTMLCollection en detalle, qué es y cómo usarlo en JavaScript. También tocaremos brevemente la diferencia entre un HTMLCollection y un NodeList que es otro objeto similar a HTMLCollection .

Creando un HTMLCollection

El getElementsByTagName() devuelve un HTMLCollection objeto. El siguiente ejemplo selecciona todos <p> elementos en el documento:

const elems = document.getElementsByTagName('p');

Se puede acceder a los elementos de la colección mediante un índice numérico, nombre o ID. Para acceder al tercer <p> en la colección, puedes escribir:

const p = document.getElementsByTagName('p')[2];

Para acceder al elemento por nombre o ID, HTMLCollection proporciona el namedItem() método. El siguiente ejemplo obtiene el <p> etiqueta con el ID notify de la colección:

const elems = document.getElementsByTagName('p');

// select <p> with ID `notify`
const p = elems.namedItem('notify');

Longitud del HTMLCollection

Igual que NodeList , el HTMLCollection también es compatible con length propiedad que devuelve el número total de elementos dentro de la colección:

const elems = document.getElementsByTagName('p');

// print total elements
console.log(elems.length);

El length La propiedad es extremadamente útil cuando desea recorrer los elementos HTML de la colección:

const elems = document.getElementsByTagName('p');

// loop all collection elements
for (let i = 0; i < elems.length; i++) {
    elems[i].style.color = 'red';    
}

Iterando sobre un HTMLCollection

Además del bucle for simple, que discutimos anteriormente, la instrucción for...of también se puede usar para iterar un HTMLCollection :

const elems = document.getElementsByTagName('p');

// iterate using for...of loop
for (const p of elems) {
    console.log(p.innerText);
}

A diferencia de NodeList , HTMLCollection no es compatible con el método forEach(). Sin embargo, puedes usar el Array.from() método para convertir HTMLCollection a una matriz normal y luego use forEach() iterar sobre él:

const elems = document.getElementsByTagName('p');

// itereate using forEach()
Array.from(elems).forEach((p, index) => {
    console.log(p.innerText);
});

Eche un vistazo a esta guía para obtener más información sobre las diferentes formas de iterar sobre elementos DOM.

HTMLCollection frente a matrices

Un HTMLCollection El objeto puede parecer una matriz, pero no es una matriz. Ambos son dos cosas completamente diferentes. Al igual que una matriz, puede iterar a través de la colección y hacer referencia a sus elementos mediante un número de índice.

Sin embargo, no puede usar los métodos de matriz comunes como push() , pop() , join() y valueOf() en un HTMLCollecton .

HTMLCollection contra NodeList

Ambos HTMLCollection y NodeList son colecciones de elementos DOM. La única diferencia está en los métodos que proporcionan y en el tipo de nodos que pueden almacenar.

Un HTMLCollection puede solo contener los elementos HTML, mientras que un NodeList puede contener cualquier cosa, elementos HTML, comentarios, atributos, textos, etc.

Un HTMLCollection proporciona los mismos métodos que un NodeList y adicionalmente un método llamado nameItem() para acceder a los elementos de la colección por nombre o DNI. El NodeList solo se puede acceder a los elementos mediante un índice numérico.

Ambos NodeList y HTMLCollection son no matrices, por lo que no puede usar los métodos de matriz como push() , pop() , join() y valueOf() para los dos.

Resumen

En este artículo, aprendimos sobre el HTMLCollection objeto y cómo usarlo en JavaScript. En pocas palabras:

  • Un HTMLCollection es una colección similar a una matriz de elementos HTML .
  • Un HTMLCollection siempre está en vivo , lo que significa que puede modificar los elementos de la colección y los cambios se aplicarán automáticamente.
  • El document.getElementsByTagName() El método se puede utilizar para extraer un HTMLCollection del DOM.
  • El length propiedad devuelve el número total de elementos dentro de un HTMLCollection objeto.
  • Puede usar el bucle for simple (para navegadores antiguos) o la instrucción for...of para iterar sobre los elementos de la colección.
  • Un HTMLCollection es no una matriz, por lo que no se pueden usar métodos de matriz comunes en ella.
  • Un HTMLCollection es similar a NodeList, pero solo almacena elementos HTML y proporciona un método adicional para acceder a elementos por nombre o ID.