Cuando trabajamos con el DOM, lo que queremos es poder modificar los elementos del documento (su contenido, añadirlos, eliminarlos).
Por tanto, lo primero que tenemos que hacer es aprender a seleccionar los elementos que queremos.
JavaScript ofrece varios métodos para seleccionar elementos en el DOM. Estos métodos se pueden clasificar en dos categorías principales:
- Métodos basados en identificadores, clases y etiquetas
- Métodos basados en selectores CSS.
Resultado de la selección
Los métodos de selección van a devolverte un resultado, con la selección (obvio). En función del método que uses, el resultado puede ser,
| Tipo | Selecciona | Cantidad devuelta | Estático o no |
|---|---|---|---|
HTMLElement | Elemento | 1️⃣ (o null) | (no aplica) |
HTMLCollection | Elemento | ♾️ (mismo tipo) | Dinámico |
NodeList | Nodo | ♾️ (pueden ser distintos tipos) | Estático |
Vamos a ver cada uno de ellos,
Es un único nodo, por ejemplo, un solo <div>.
Es devuelto por métodos como getElementsByTagName() y getElementsByClassName().
Es dinámico, lo que significa que si agregas o eliminas elementos en el DOM, el HTMLCollection reflejará esos cambios automáticamente.
Puede ser devuelto por varios métodos, como querySelectorAll().
Es estático estático, lo que significa que no se actualiza si el DOM cambia después de la selección.
Lo de estático y dinámico puede ser un poco complicado de entender
¿Quieres comprobarlo por ti mismo?
Si quieres comprobarlo por ti mismo, abre las DevTools en esta misma página, y pega lo siguiente en la consola
// HTMLCollection dinámico
let htmlCollection = document.getElementsByTagName('div');
console.log(htmlCollection.length); // Número de divs inicial
let nodeList = document.querySelectorAll('div');
console.log(nodeList.length); // Número de divs inicial
let newDiv = document.createElement('div');
document.body.appendChild(newDiv);
console.log(htmlCollection.length); // Número de divs después de agregar un nuevo div (verá el cambio)
console.log(nodeList.length); // Número de divs (NO verá el cambio, ya que es estático)Verás que
- Contamos el numero de
diven la página - Añadimos uno nuevo (ya veremos en su momento cómo hacerlo)
- Volvemos a acceder al valor que hemos cargado antes
htmlCollectionNO cambia (es estático)nodeListSI cambia (es dinámico).
Métodos basados en identificadores, clases y etiquetas
Estos métodos son los primeros que existieron. Nos permiten seleccionar un único elemento o un conjunto de elementos basados en sus identificadores, clases o etiquetas elementos.
| Comando | Descripción | Retorno |
|---|---|---|
getElementById() | Un elemento por su atributo id. | Elemento único |
getElementsByClassName() | Todos los elementos que tienen una clase. | HTMLCollection |
getElementsByTagName() | Todos los elementos con una etiqueta específica. | HTMLCollection |
getElementById()
El método getElementById() se utiliza para seleccionar un único elemento basado en su atributo id. Dado que id debe ser único dentro de un documento HTML, este método siempre devolverá un único elemento.
const miElemento = document.getElementById('mi-id');getElementsByClassName()
El método getElementsByClassName() devuelve una colección de elementos con la clase especificada. A diferencia de getElementById(), este método puede devolver múltiples elementos si varios tienen la misma clase.
const elementos = document.getElementsByClassName('mi-clase');getElementsByTagName()
El método getElementsByTagName() devuelve una colección de todos los elementos con una etiqueta específica. Al igual que getElementsByClassName(), este método puede devolver múltiples elementos.
const elementos = document.getElementsByTagName('p');Métodos basados en selectores CSS
Los métodos basados en selectores CSS son más nuevos (se añadieron con HTML5). Ofrecen una forma más flexible de seleccionar elementos, ya que permiten usar uso de la enorme variedad de selectores disponibles.
| Comando | Descripción | Retorno |
|---|---|---|
querySelector() | Primer elemento que coincide con el selector CSS. | Element |
querySelectorAll() | Todos los elementos que coinciden con el selector CSS. | NodeList |
querySelector()
El método querySelector() devuelve el primer elemento que coincide con el selector CSS especificado. Este método es útil cuando se necesita seleccionar un único elemento que coincide con un selector.
const elemento = document.querySelector('.mi-clase');querySelectorAll()
El método querySelectorAll() devuelve una NodeList de todos los elementos que coinciden con el selector CSS. A diferencia de querySelector(), este método devuelve todos los elementos que coinciden, no solo el primero.
const elementos = document.querySelectorAll('div.mi-clase');