JavaScript: selección de elementos del DOM
Comprender cómo seleccionar elementos del DOM en JavaScript es crucial para cualquier desarrollador web. Esta guía completa cubrirá todos los métodos y técnicas esenciales para seleccionar con destreza elementos del DOM, garantizando que tus aplicaciones web sean dinámicas e interactivas.
Introducción a la selección de elementos del DOM
El Modelo de Objetos del Documento (DOM) es una interfaz de programación para documentos web. Representa la página para que los programas puedan cambiar la estructura, el estilo y el contenido del documento. Seleccionar eficientemente elementos del DOM es el primer paso para manipular páginas web con JavaScript.
Uso de getElementById
Uno de los métodos más simples y más utilizados es seleccionar un solo elemento por su ID.
const element = document.getElementById('example');
element.textContent = "You clicked the button!";En este ejemplo, usamos getElementById para seleccionar el elemento con el ID example y actualizar su contenido de texto.
Uso de getElementsByClassName
Este método devuelve una HTMLCollection viva de elementos con el nombre de clase especificado. Es esencial para apuntar a múltiples elementos.
const elements = document.getElementsByClassName('example');
Array.from(elements).forEach((element, index) => {
element.textContent = `Element ${index + 1} changed!`;
});Aquí, getElementsByClassName selecciona todos los elementos con la clase example. Luego, el código itera sobre la colección para actualizar el contenido de texto de cada elemento.
INFO
Convierte siempre la HTMLCollection en un array usando Array.from() para poder usar métodos de array como forEach(). Ten en cuenta que este método devuelve una colección viva, lo que significa que se actualiza automáticamente cuando cambia el DOM.
Uso de getElementsByTagName
Selecciona todos los elementos con el nombre de etiqueta dado, proporcionando una HTMLCollection viva.
const paragraphs = document.getElementsByTagName('p');
for (let i = 0; i < paragraphs.length; i++) {
paragraphs[i].style.backgroundColor = 'yellow';
}En este ejemplo, getElementsByTagName selecciona todos los elementos p. Luego, el bucle resalta cada párrafo cambiando su color de fondo a amarillo.
Uso de querySelector
El método querySelector devuelve el primer elemento que coincide con un selector CSS especificado.
const element = document.querySelector('.example');
element.style.backgroundColor = 'lightblue';Aquí, querySelector selecciona el primer elemento con la clase example, y su color de fondo se cambia a azul claro.
INFO
Usa querySelector para seleccionar el primer elemento coincidente y querySelectorAll para seleccionar todos los elementos coincidentes.
Uso de querySelectorAll
Este método devuelve una NodeList estática de elementos que coinciden con el selector CSS especificado.
const elements = document.querySelectorAll('.example');
elements.forEach((element, index) => {
element.style.backgroundColor = 'lightgreen';
element.textContent = `Element ${index + 1} highlighted!`;
});En este ejemplo, querySelectorAll selecciona todos los elementos con la clase example. Luego, el código actualiza el color de fondo y el contenido de texto de cada elemento seleccionado.
INFO
querySelectorAll devuelve una NodeList estática, que no se actualiza automáticamente cuando cambia el DOM. Esto contrasta con getElementsByClassName y getElementsByTagName, que devuelven HTMLCollections vivas. Aunque forEach es compatible con todos los navegadores modernos, en entornos heredados puede ser necesario Array.from(elements).forEach(...).
Uso de matches
El método matches comprueba si un elemento coincide con un selector CSS dado.
const element = document.getElementById('test');
if (element.matches('.example')) {
element.style.color = 'red';
element.textContent = "Element matches the selector!";
}Aquí, matches se usa para comprobar si el elemento con el ID test tiene la clase example. Si coincide, se actualizan el contenido de texto y el color.
Uso de closest
El método closest recorre el elemento y sus padres para encontrar el ancestro más cercano que coincida con el selector proporcionado.
const element = document.getElementById('child');
const parent = element.closest('.outer');
parent.style.border = '2px solid red';En este ejemplo, closest encuentra el ancestro más cercano con la clase outer para el elemento con el ID child, y su borde se cambia a rojo.
INFO
Usa closest para encontrar el ancestro más cercano, lo cual es muy útil en la delegación de eventos.
Combinación de selectores
Los selectores se pueden combinar para un objetivo más específico.
const element = document.querySelector('.example.special');
element.style.backgroundColor = 'pink';
element.textContent = "Special element highlighted!";Aquí, combinamos selectores para apuntar al elemento que tiene ambas clases example y special, actualizando su color de fondo y su contenido de texto.
Conclusión
Dominar la selección de elementos del DOM en JavaScript es fundamental para cualquier desarrollador web. Al utilizar los diversos métodos tratados, puedes apuntar y manipular elementos de manera eficiente para crear aplicaciones web dinámicas e interactivas.
INFO
Nota de rendimiento: Los métodos heredados como getElementById y getElementsByClassName están altamente optimizados en los navegadores modernos. Para consultas complejas, querySelector y querySelectorAll suelen preferirse por su flexibilidad y compatibilidad con selectores CSS, aunque pueden ser ligeramente más lentos en DOM extremadamente grandes. Para rendimiento al iterar, prefiere siempre colecciones estáticas (querySelectorAll), ya que las colecciones vivas (getElementsBy...) provocan reflows en cada cambio del DOM. Ten en cuenta que querySelectorAll está altamente optimizado y es lo suficientemente rápido para casos de uso típicos.
Práctica
Which of the following methods can be used to select DOM elements in JavaScript?