Skip to main content

​
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

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

// Seleccionar clases múltiples
const elemento2 = document.querySelector('.clase1.clase2');
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:
  • 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
  • querySelectorAll acepta cualquier selector CSS complejo
  • getElementsByClassName solo acepta nombres de clases simples
  • 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étodoRetornaVivo/EstáticoSelector
getElementByIdElemento únicoN/AID solamente
getElementsByClassNameHTMLCollectionVivoClase solamente
getElementsByTagNameHTMLCollectionVivoEtiqueta solamente
querySelectorElemento únicoN/ACualquier CSS
querySelectorAllNodeListEstáticoCualquier 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

Build docs developers (and LLMs) love

Get started for freeTalk to us