Selectores del DOM

Domina los métodos para seleccionar elementos HTML con JavaScript

Selectores del DOM

Los selectores son la base de la manipulación del DOM. Antes de poder modificar un elemento, necesitas seleccionarlo. JavaScript ofrece varios métodos para encontrar elementos en el documento.

getElementById

Selecciona un elemento por su atributo id. Retorna un único elemento o null si no existe.

function demoGetById() {
    var elemento = document.getElementById('texto-ejemplo');
    elemento.textContent = 'Texto cambiado con getElementById';
    elemento.style.color = 'blue';
    console.log('getElementById:', elemento);
}

Características:

• Es el método más rápido
• Retorna un único elemento (los IDs deben ser únicos)
• Retorna null si no encuentra el elemento
• No necesitas el prefijo # como en CSS

Los IDs deben ser únicos en toda la página. Si hay IDs duplicados, este método solo retornará el primero que encuentre.

getElementsByClassName

Selecciona todos los elementos que tienen una clase CSS específica. Retorna una HTMLCollection (similar a un array).

function demoGetByClass() {
    var elementos = document.getElementsByClassName('destacado');
    console.log('getElementsByClassName encontró:', elementos.length, 'elementos');

    for (var i = 0; i < elementos.length; i++) {
        elementos[i].style.backgroundColor = 'orange';
        elementos[i].style.color = 'white';
    }
}

Características:

• Retorna una colección viva (se actualiza automáticamente si el DOM cambia)
• Puedes iterar sobre ella con un bucle for
• No necesitas el prefijo . como en CSS
• Si no encuentra elementos, retorna una colección vacía (length = 0)

Las HTMLCollection son “vivas”, lo que significa que se actualizan automáticamente. Ten cuidado al modificar elementos mientras iteras, ya que la colección puede cambiar durante el bucle.

getElementsByTagName

Selecciona todos los elementos de un tipo de etiqueta HTML específico.

var elementByTagName = document.getElementsByTagName('ul');
console.log('getElementsByTagName:', elementByTagName);

Ejemplo práctico:

// Seleccionar todos los párrafos
const parrafos = document.getElementsByTagName('p');

// Cambiar el color de todos los párrafos
for (let i = 0; i < parrafos.length; i++) {
    parrafos[i].style.color = 'navy';
}

Características:

• Retorna una HTMLCollection viva
• Útil para seleccionar todos los elementos de un tipo
• Puedes usar '*' para seleccionar todos los elementos

querySelector

Selecciona el primer elemento que coincide con un selector CSS. Retorna un único elemento o null.

var primerItem = document.querySelector('.item');
console.log('querySelector: ', primerItem);

function demoQuerySelector() {
    var primerItem = document.querySelector('.item');
    primerItem.style.backgroundColor = 'lightgreen';
    primerItem.textContent = 'Seleccionado con querySelector';
    console.log('querySelector seleccionó:', primerItem);
}

Ejemplos de Selectores CSS

Clases

// Seleccionar por clase
const elemento = document.querySelector('.mi-clase');

// Seleccionar clases múltiples
const elemento2 = document.querySelector('.clase1.clase2');

IDs

// Seleccionar por ID
const elemento = document.querySelector('#mi-id');

Atributos

// Seleccionar por atributo
const input = document.querySelector('[type="text"]');

// Seleccionar por atributo data-*
const elemento = document.querySelector('[data-id="123"]');

Combinadores

// Hijo directo
const elemento = document.querySelector('.padre > .hijo');

// Descendiente
const elemento2 = document.querySelector('.contenedor .item');

// Hermano adyacente
const elemento3 = document.querySelector('h2 + p');

querySelector acepta cualquier selector CSS válido, lo que lo hace muy flexible y poderoso.

querySelectorAll

Selecciona todos los elementos que coinciden con un selector CSS. Retorna una NodeList.

var todosLosItems = document.querySelectorAll('.item');
console.log('querySelectorAll: ', todosLosItems);

Ejemplo práctico:

// Seleccionar todos los elementos con clase 'item'
const items = document.querySelectorAll('.item');

// Iterar usando forEach (NodeList soporta forEach)
items.forEach(function(item, index) {
    item.textContent = `Item ${index + 1}`;
    item.style.padding = '10px';
});

Diferencias con getElementsByClassName:

NodeList vs HTMLCollection

• querySelectorAll retorna una NodeList estática (no se actualiza automáticamente)
• getElementsByClassName retorna una HTMLCollection viva (se actualiza automáticamente)
• NodeList soporta el método forEach(), HTMLCollection no

Flexibilidad de Selectores

• querySelectorAll acepta cualquier selector CSS complejo
• getElementsByClassName solo acepta nombres de clases simples

Performance

• getElementsByClassName es ligeramente más rápido
• Para la mayoría de casos, la diferencia es insignificante
• Elige el que te resulte más conveniente para tu caso de uso

Comparación de Métodos

Método	Retorna	Vivo/Estático	Selector
getElementById	Elemento único	N/A	ID solamente
getElementsByClassName	HTMLCollection	Vivo	Clase solamente
getElementsByTagName	HTMLCollection	Vivo	Etiqueta solamente
querySelector	Elemento único	N/A	Cualquier CSS
querySelectorAll	NodeList	Estático	Cualquier CSS

¿Cuál Usar?

1. Para un elemento único con ID

   Usa getElementById - es el más rápido y directo.

   const header = document.getElementById('header');
   
2. Para múltiples elementos con selectores complejos

   Usa querySelectorAll - acepta cualquier selector CSS.

   const items = document.querySelectorAll('.lista > .item:not(.inactivo)');
   
3. Para múltiples elementos simples por clase

   Usa getElementsByClassName o querySelectorAll - ambos funcionan bien.

   // Opción 1
   const botones = document.getElementsByClassName('boton');
   
   // Opción 2
   const botones2 = document.querySelectorAll('.boton');
   
4. Cuando necesitas forEach

   Usa querySelectorAll - soporta forEach nativamente.

   document.querySelectorAll('.item').forEach(item => {
       item.addEventListener('click', handleClick);
   });
   

Selección en Contexto

Todos estos métodos también funcionan en elementos específicos, no solo en document:

// Seleccionar un contenedor
const contenedor = document.getElementById('contenedor');

// Buscar solo dentro de ese contenedor
const items = contenedor.querySelectorAll('.item');
const destacados = contenedor.getElementsByClassName('destacado');

Buscar dentro de un elemento específico es más rápido que buscar en todo el documento, especialmente en páginas grandes.

Próximos Pasos

Manipulación del DOM

Aprende a modificar elementos seleccionados

Event Listeners

Añade interactividad con eventos