Métodos de selección del DOM en JavaScript

Comprender los métodos de selección del DOM en JavaScript es clave para manipular la interfaz, optimizar el rendimiento y construir aplicaciones a medida robustas. A continuación encontrarás una guía clara y práctica de las formas más comunes de seleccionar elementos en el DOM, con ejemplos comentados y consejos de uso. En Q2BSTUDIO desarrollamos software a medida y aplicaciones a medida con estándares de calidad empresarial, integrando buenas prácticas de frontend, backend e inteligencia artificial para lograr productos eficientes y seguros. Si buscas un partner técnico, descubre cómo abordamos proyectos end to end en desarrollo de aplicaciones y software multiplataforma.

1. document.querySelector()

Devuelve el primer elemento que coincide con un selector CSS. Siempre retorna un único elemento o null.

HTML de ejemplo

<p class="text">Hola</p>
<p class="text">Mundo</p>

JS

let resultado = document.querySelector(".text");
console.log(resultado.textContent); // Salida Hola primer elemento

Úsalo cuando solo necesites el primer elemento que coincida con el selector.

2. document.querySelectorAll()

Devuelve todos los elementos que coinciden con un selector CSS. Retorna un NodeList estático sobre el que puedes iterar.

HTML de ejemplo

<p class="text">Hola</p>
<p class="text">Mundo</p>

JS

let todos = document.querySelectorAll(".text");
todos.forEach(p => console.log(p.textContent));
// Salida
// Hola
// Mundo

Úsalo cuando necesites todas las coincidencias.

3. document.getElementById()

Selecciona un elemento por su id único. Siempre retorna un solo elemento o null.

HTML de ejemplo

<p id="titulo">Bienvenido de nuevo</p>

JS

let cabecera = document.getElementById("titulo");
console.log(cabecera.textContent); // Salida Bienvenido de nuevo

4. document.getElementsByClassName()

Devuelve todos los elementos con una clase dada. Retorna un HTMLCollection en vivo que se actualiza si el DOM cambia.

HTML de ejemplo

<p class="nota">Primera</p>
<p class="nota">Segunda</p>

JS

let notas = document.getElementsByClassName("nota");
console.log(notas[0].textContent); // Salida Primera
console.log(notas[1].textContent); // Salida Segunda

Ideal para manejar múltiples elementos que comparten la misma clase.

5. document.getElementsByTagName()

Devuelve todos los elementos por nombre de etiqueta. Retorna un HTMLCollection en vivo.

HTML de ejemplo

<h1>Encabezado 1</h1>
<h1>Encabezado 2</h1>

JS

let h1s = document.getElementsByTagName("h1");
console.log(h1s.length); // Salida 2

Útil para seleccionar por tipo de etiqueta como div, p, h1, etc.

6. document.getElementsByName()

Devuelve todos los elementos con un atributo name. Muy usado en formularios.

HTML de ejemplo

<input type="radio" name="genero" value="masculino"> Masculino
<input type="radio" name="genero" value="femenino"> Femenino

JS

let generos = document.getElementsByName("genero");
generos.forEach(input => console.log(input.value));
// Salida
// masculino
// femenino

Resumen rápido

getElementById Devuelve un solo elemento Basado en id Tipo Element o null Notas el id debe ser único

getElementsByClassName Devuelve múltiples elementos Basado en class Tipo HTMLCollection en vivo Notas se actualiza si el DOM cambia

getElementsByTagName Devuelve múltiples elementos Basado en tag Tipo HTMLCollection en vivo Notas ejemplos p div h1

getElementsByName Devuelve múltiples elementos Basado en atributo name Tipo NodeList Notas muy usado en formularios

querySelector Devuelve el primer elemento coincidente Basado en selector CSS Tipo Element o null Notas muy flexible

querySelectorAll Devuelve todas las coincidencias Basado en selector CSS Tipo NodeList estático Notas no se actualiza automáticamente

Buenas prácticas

- Usa getElementById cuando tengas un id único es el más rápido y claro. - Prefiere querySelector y querySelectorAll por su flexibilidad con selectores complejos. - Recuerda que HTMLCollection es en vivo y NodeList puede ser estático esto afecta cómo responden a cambios dinámicos del DOM. - Convierte colecciones a arrays si necesitas métodos de array Array.from o spread.

En Q2BSTUDIO combinamos estas prácticas de frontend con arquitectura escalable y seguridad desde el diseño para entregar software a medida confiable. Nuestro equipo integra inteligencia artificial, agentes IA e ia para empresas en productos de nueva generación, y reforzamos ciberseguridad con auditorías y pentesting. Además, desplegamos soluciones en servicios cloud aws y azure y habilitamos analítica con servicios inteligencia de negocio y power bi. Si necesitas un partner para crear aplicaciones a medida listas para crecer, conoce nuestro enfoque en software a medida y aplicaciones a medida.