¿Cómo acceder al DOM con JavaScript? – Ejemplos!

Entender qué significa y para qué sirve el DOM es clave para manipular tus páginas web. Aprende cuándo y cómo usar los selectores de JavaScript para acceder a los elementos HTML. Con estos conocimientos, descubrirás los grandes beneficios de hacer tu sitio web dinámico e interactivo.

como acceder al dom con javascript

Índice

1. ¿Qué significa acceder al DOM con JavaScript?

Acceder al DOM desde JavaScript significa que tu código JavaScript puede «ver», «leer» y «manipular» los elementos del documento HTML mientras se está ejecutando en el navegador.

¿Qué es el DOM?

DOM = Document Object Model (Modelo de Objetos del Documento)

  • Es una representación estructurada del documento HTML.
  • El navegador crea un «árbol de nodos» donde cada etiqueta HTML se convierte en un objeto que puede ser manipulado con JavaScript.

📌Imaginemos que tenemos esta estructura HTML básica:

<!DOCTYPE html>
<html>
  <body>
    <h1>Hola Mundo</h1>
    <p>Bienvenido al DOM</p>
  </body>
</html>Lenguaje del código: HTML, XML (xml)

📌El navegador crea esta estructura DOM:

document
└── html
    └── body
        ├── h1
        │   └── "Hola Mundo"
        └── p
            └── "Bienvenido al DOM"Lenguaje del código: JavaScript (javascript)

📌Cada parte del documento es un nodo del árbol, y todos juntos forman una jerarquía.

📌Cada uno de estos nodos puede tener padres, hijos y hermanos.

📌Esto es clave porque nos permite acceder fácilmente a cualquier parte de la página desde JavaScript.

1.1. Ejemplo para entender cómo y para que sirve acceder al DOM con JavaScript.

Supongamos que queremos crear un sistema de comentarios en una página web donde el usuario pueda escribir un mensaje en un input y agregarlo debajo con un clic, sin recargar la página.

PASO 1: Creamos la estructura HTML (Antes de usar JavaScript)

<h2>Dejá tu comentario</h2>

<input type="text" id="comentario" placeholder="Escribí tu comentario aquí">
<button id="btn-enviar">Enviar</button>

<div id="lista-comentarios">
  <!-- Aquí aparecerán los comentarios -->
</div>Lenguaje del código: HTML, XML (xml)

PASO 2: ¿Qué queremos lograr con JavaScript?

Queremos que:

  1. Cuando el usuario haga clic en «Enviar»,
  2. Se tome el valor del <input>,
  3. Se cree un nuevo elemento <p> con ese texto,
  4. Y se agregue dentro de #lista-comentarios.

PASO 3: Código JavaScript para acceder al DOM y manipularlo.

// 1. Accedemos a los elementos del DOM
const inputComentario = document.getElementById('comentario');
const botonEnviar = document.getElementById('btn-enviar');
const contenedorComentarios = document.getElementById('lista-comentarios');

// 2. Agregamos interactividad
botonEnviar.addEventListener('click', () => {
  const texto = inputComentario.value;

  if (texto.trim() !== '') {
    const nuevoComentario = document.createElement('p');
    nuevoComentario.textContent = texto;

    contenedorComentarios.appendChild(nuevoComentario);
    inputComentario.value = ''; // Limpiamos el input
  }
});Lenguaje del código: JavaScript (javascript)

¿Cómo accedemos al DOM en este código? Aquí, en la parte 1 de este código es donde accedemos al DOM HTML, para luego realizar la acciones que deseamos con dichos elementos:

1. document.getElementById('comentario')

  • document: Representa toda la página HTML (el DOM).
  • .getElementById(): Es un método que busca un único elemento del HTML que tenga ese id.
  • 'comentario': Es el ID del input de texto donde el usuario escribe el comentario.
  • Resultado: obtenemos una referencia al input HTML para poder leer o modificar su valor más adelante.

2. document.getElementById('btn-enviar')

  • Accedemos al botón «Enviar» de la página.
  • Guardamos la referencia en la variable botonEnviar.
  • Esto nos permitirá más adelante agregarle un escuchador de eventos (addEventListener).

3. document.getElementById('lista-comentarios')

  • Accedemos al contenedor div donde van a aparecer los comentarios que el usuario agregue.
  • Guardamos esa referencia en contenedorComentarios para poder insertar elementos dinámicamente dentro de él.

¿Por qué es importante esta parte?

Porque si no accedemos a los elementos del DOM, no podemos:

  • Leer lo que el usuario escribió.
  • Detectar cuándo hace clic.
  • Modificar el contenido de la página.
  • Interactuar con la interfaz.

💡Estas tres líneas son la conexión entre tu JavaScript y el HTML de tu página.
Sin estas referencias, el resto del código no sabría qué modificar ni dónde hacerlo.

NOTA!!!! Si te animas y deseas ver el resultado de este ejemplo y de todos los que iremos proporcionando directamente desde tu PC, te invito a seguir estos pasos.

  1. Primero, revisa el punto 5 del siguiente artículo sobre como usar e instalar VSCode (este es el editor de código mas usado), donde encontrarás los pasos para crear la estructura necesaria para visualizar una página desde tu navegador predeterminado.
  2. Si entendiste correctamente este paso anterior, sabrás donde colocar el código script que te acabamos de proporcionar (arriba). Ahora, puedes visualizar el resultado, para ello puedes hacer lo siguiente:
    • Una vez abierta y visualizada la página, abre la consola del navegador presionando la tecla F12.
    • Ahora, dirígete a la pestaña que dice Console, y desde aquí podrás ver el resultado del script que hayamos introducido anteriormente.
  3. No te preocupes, estos pasos son más simples de lo que parecen!!!! Entonces… cada vez que dejemos un código de ejemplo como éste, puedes seguir estos pasos y ver los resultados por ti mismo. ¡Ojalá te animes!!!!

Link para descargar el editor de código Visual Studi Code!!

2. ¿Para qué sirve acceder al DOM desde JavaScript?

Acceder al DOM desde JavaScript te permite crear páginas web dinámicas, interactivas y personalizadas en tiempo real.
Es lo que transforma un sitio web de «solo lectura» en una experiencia «viva» e interactiva para el usuario.

  1. Interactividad con el usuario
    • Podés responder a acciones del usuario (clicks, teclado, scroll, etc.).
    • Ejemplo:
    • Mostrar un menú cuando el usuario hace clic en un botón.
  2. Modificar contenido dinámicamente
    • Cambiar texto, imágenes, enlaces, inputs, etc., sin recargar la página.
  3. Modificar estilos visuales
    • Cambiar colores, tamaños, mostrar u ocultar elementos según condiciones.
  4. Crear o eliminar elementos HTML
    • Podés agregar contenido HTML nuevo desde JavaScript, o eliminar lo que ya no sirve.
  5. Validar y procesar formularios
    • Leer los valores de inputs, hacer validaciones y dar feedback al usuario sin recargar la página.
  6. Actualizar el contenido según datos externos
    • Podés mostrar datos traídos desde una API sin modificar el HTML original.
  7. Crear comportamientos personalizados
    • Acceder al DOM te permite crear comportamientos únicos que no podrías lograr solo con HTML y CSS.
    • Ejemplo:
      • Mostrar un modal de confirmación.
      • Crear una galería de imágenes interactiva.
      • Cambiar el contenido según la hora del día.
  8. Mejorar la accesibilidad (a11y)
    • Podés usar JavaScript para mejorar el enfoque del teclado, el contenido accesible para lectores de pantalla, o los atributos aria.

EN RESUMEN:

Acceder al DOM desde JavaScript te da el poder de manipular la interfaz del usuario en tiempo real, lo que permite:

Acción¿Qué podés hacer?
LeerObtener texto, valores, atributos de HTML
EscribirCambiar el contenido o estilo de los elementos
EscucharDetectar eventos del usuario (clicks, teclado…)
Crear/EliminarGenerar o borrar nodos del documento
PersonalizarMostrar contenido diferente según el contexto

3. ¿Cómo acceder al DOM con JavaScript? Métodos básicos

3.1. document.getElementById(id)

Este método es el más directo y eficiente para seleccionar un elemento. Si sabes cual es el selector CSS de id de un elemento, úsalo. Recuerda que un id debe ser único en toda la página HTML.

HTML de ejemplo con ID:

<h1 id="titulo-principal">¡Hola, mundo!</h1>
<p id="parrafo-secundario">Este es un párrafo de ejemplo.</p>Lenguaje del código: HTML, XML (xml)

Accedemos al elemento HTML con selector ID usando JS:

// Seleccionamos el h1 por su ID
const titulo = document.getElementById('titulo-principal');

console.log(titulo);
// Resultado en la consola:
// <h1 id="titulo-principal">¡Hola, mundo!</h1>

// Seleccionamos el párrafo
const parrafo = document.getElementById('parrafo-secundario');

console.log(parrafo);
// Resultado en la consola:
// <p id="parrafo-secundario">Este es un párrafo de ejemplo.</p>Lenguaje del código: JavaScript (javascript)

Explicación: Este método busca en todo el documento HTML un elemento que tenga el id que le pases como argumento. Como los id son únicos, siempre te devolverá un solo elemento, o null si no encuentra ninguno.

3.2. document.getElementsByClassName(className)

Este método es ideal cuando quieres seleccionar todos los elementos que comparten una misma clase.

HTML de ejemplo con class iguales:

<ul id="lista-frutas">
    <li class="fruta">Manzana</li>
    <li class="fruta">Banana</li>
    <li class="fruta">Naranja</li>
</ul>Lenguaje del código: HTML, XML (xml)

Accedemos a todos los elementos que comparten una misma class "Fruta" en este ejemplo:

// Seleccionamos todos los elementos con la clase "fruta"
const frutas = document.getElementsByClassName('fruta');

console.log(frutas);
// Resultado en la consola:
// HTMLCollection(3) [li.fruta, li.fruta, li.fruta]

// Accedemos al primer elemento de la colección
console.log(frutas[0]);
// Resultado en la consola:
// <li class="fruta">Manzana</li>Lenguaje del código: JavaScript (javascript)

Explicación: Este método no devuelve un solo elemento, sino una colección en vivo de todos los elementos que tienen la clase especificada. Esta colección (HTMLCollection) es similar a un array, pero no tiene todos sus métodos. Para acceder a un elemento, debes usar su índice (ej. [0]).

3.3. document.getElementsByTagName(tagName)

Similar al método anterior, este te permite seleccionar todos los elementos por su nombre de etiqueta HTML, como <div>, <p> o <li>.

HTML de ejemplo:

<header>
    <h1>Mi Blog</h1>
</header>
<main>
    <p>Artículo 1</p>
    <p>Artículo 2</p>
</main>Lenguaje del código: HTML, XML (xml)

Accedemos a la etiqueta <p> en este ejemplo:

// Seleccionamos todos los elementos <p>
const parrafos = document.getElementsByTagName('p');

console.log(parrafos);
// Resultado en la consola:
// HTMLCollection(2) [p, p]

// Accedemos al segundo párrafo
console.log(parrafos[1]);
// Resultado en la consola:
// <p>Artículo 2</p>Lenguaje del código: JavaScript (javascript)

Explicación: Devuelve una colección en vivo (HTMLCollection) de todos los elementos con la etiqueta que le pasaste. Es útil cuando quieres seleccionar un grupo de elementos del mismo tipo.

4. Accediendo al DOM en JavaScript con querySelector.

¿Qué es querySelector?

document.querySelector() es un método moderno de JavaScript que te permite acceder al primer elemento del DOM que coincida con un selector CSS.

✅ Características:

  • Forma parte de las versiones más recientes del DOM API (HTML5+).
  • Es más intuitivo para quienes ya conocen CSS.
  • Se prefiere en muchos proyectos actuales por su sintaxis clara y poderosa.
  • Acepta cualquier selector CSS válido: clases, ids, etiquetas, anidamientos, atributos, pseudoclases, etc.
  • No estás limitado a solo ID, clase o etiqueta.
  • Funciona con selectores combinados (por ejemplo: '.contenedor .item.activo').

4.1. document.querySelector(selector)

Útil cuando necesitas encontrar un único elemento de forma precisa. La gran ventaja es que puedes usar cualquier selector CSS válido.

HTML de ejemplo:

<header>
    <nav>
        <a href="#" class="enlace activo">Inicio</a>
        <a href="#">Sobre mí</a>
    </nav>
</header>
<main>
    <section id="galeria">
        <h2 class="titulo-seccion">Mi Galería</h2>
        <img src="imagen1.jpg" alt="Imagen 1">
    </section>
</main>Lenguaje del código: HTML, XML (xml)

Accedemos al primer enlace con la clase «activo»:

// Seleccionamos el primer enlace con la clase "activo"
const enlaceActivo = document.querySelector('.enlace.activo');

console.log(enlaceActivo);
// Resultado en la consola:
// <a href="#" class="enlace activo">Inicio</a>

// Seleccionamos el elemento con el ID "galeria"
const galeria = document.querySelector('#galeria');

console.log(galeria);
// Resultado en la consola:
// <section id="galeria">...</section>

// Seleccionamos el h2 que está dentro de la sección con id="galeria"
const tituloGaleria = document.querySelector('#galeria h2');

console.log(tituloGaleria);
// Resultado en la consola:
// <h2 class="titulo-seccion">Mi Galería</h2>Lenguaje del código: JavaScript (javascript)

Explicación: querySelector busca y devuelve el primer elemento que coincida con el selector que le pases. Si hay varios elementos que coinciden, solo te dará el primero. Esto lo hace perfecto para seleccionar elementos únicos, como el <h1> de la página, un div con un id específico, o el primer <li> de una lista.

4.2. document.querySelectorAll(selector)

Este método es la herramienta que usas cuando necesitas trabajar con múltiples elementos que comparten una característica. Te devuelve una lista de todos los elementos que coinciden.

HTML de ejemplo:

<ul class="lista-items">
    <li>Item 1</li>
    <li class="destacado">Item 2</li>
    <li>Item 3</li>
    <li class="destacado">Item 4</li>
</ul>Lenguaje del código: HTML, XML (xml)

Accedemos a elementos según características específicas:

// Seleccionamos todos los <li> dentro de la lista
const itemsLista = document.querySelectorAll('.lista-items li');

console.log(itemsLista);
// Resultado en la consola:
// NodeList(4) [li, li.destacado, li, li.destacado]

// Seleccionamos solo los elementos con la clase "destacado"
const itemsDestacados = document.querySelectorAll('.destacado');

console.log(itemsDestacados);
// Resultado en la consola:
// NodeList(2) [li.destacado, li.destacado]

// Podemos iterar sobre ellos para, por ejemplo, cambiarles el color
itemsDestacados.forEach(item => {
    item.style.color = 'blue';
});
// No hay un resultado en la consola como tal, pero el texto de los items 2 y 4
// se volverá de color azul en la página.Lenguaje del código: JavaScript (javascript)

Explicación: querySelectorAll devuelve una NodeList, que es una colección de elementos. La principal ventaja de una NodeList es que, a diferencia de HTMLCollection, puedes usar el método forEach() para iterar sobre los elementos, lo cual simplifica mucho la manipulación en bucle.

Diferencias con los métodos básicos del punto anterior

CaracterísticagetElementById / getElementsByClassName / getElementsByTagNamequerySelector
Año de apariciónMás antiguosMás moderno (HTML5+)
DevuelveElemento (o colección en plural)Solo el primer elemento que coincida
SintaxisSolo acepta ID, clase o etiqueta directaAcepta selectores CSS complejos
Anidamiento o combinaciones❌ No admite selectores compuestos✅ Sí: .contenedor .item:first-child
Tipo de retornoElemento o HTMLCollectionElemento individual o null
Requiere menos código adicional❌ Sí, a veces hay que filtrar manualmente✅ Sí, es directo y claro
Se puede usar con clases, id, atributos, pseudoclases❌ Limitado✅ Muy flexible

EJEMPLO DE COMPARACIÓN REAL:

Usando getElementsByClassName:

const items = document.getElementsByClassName('item');
console.log(items[0].textContent); // "Texto 1"Lenguaje del código: JavaScript (javascript)

Usando querySelector:

const item = document.querySelector('.item');
console.log(item.textContent); // "Texto 1"Lenguaje del código: JavaScript (javascript)

Mismo resultado, pero querySelector permite buscar cosas como:

document.querySelector('.contenedor .item.activo');
document.querySelector('p:nth-child(2)');
document.querySelector('[data-id="45"]');Lenguaje del código: JavaScript (javascript)

CONCLUSIÓN:

querySelector es:

  • Más poderoso y flexible.
  • Más natural para desarrolladores web modernos.
  • Ideal para seleccionar elementos complejos o con reglas más específicas.

5. Accediendo a elementos desde otros elementos.

¿Qué significa esto?

Imagina que tienes una sección en tu página con varios elementos, y solo quieres interactuar con los elementos que están dentro de esa sección. Buscar directamente desde el document podría traerte elementos de otras partes de la página que no te interesan.

Al usar un elemento padre como punto de partida, limitas la búsqueda a un área específica del DOM.

5.1. elementoPadre.querySelector(selector)

Este método funciona exactamente igual que document.querySelector, con la diferencia crucial de que la búsqueda se limita al elemento padre que especifiques.

HTML de ejemplo:

<div id="seccion-principal">
    <h1>Título de la Sección</h1>
    <p>Este es el primer párrafo de la sección.</p>
    <div class="tarjeta">
        <h2>Tarjeta 1</h2>
        <p>Contenido de la tarjeta 1.</p>
    </div>
    <div class="tarjeta">
        <h2>Tarjeta 2</h2>
        <p>Contenido de la tarjeta 2.</p>
    </div>
</div>
<div id="otra-seccion">
    <p>Este párrafo está en otra sección.</p>
</div>Lenguaje del código: HTML, XML (xml)

Accedemos con JavaScript:

// Primero, seleccionamos el elemento padre
const seccionPrincipal = document.getElementById('seccion-principal');

// Ahora, buscamos el primer párrafo DENTRO de la seccionPrincipal
const primerParrafo = seccionPrincipal.querySelector('p');

console.log(primerParrafo);
// Resultado en la consola:
// <p>Este es el primer párrafo de la sección.</p>

// ¿Qué pasaría si buscamos un párrafo desde el documento global?
const parrafoGlobal = document.querySelector('p');

console.log(parrafoGlobal);
// Resultado en la consola:
// <p>Este es el primer párrafo de la sección.</p>
// En este caso el resultado es el mismo porque es el primer <p> que encuentra,
// pero si hubiera otro <p> antes, el resultado sería diferente.Lenguaje del código: JavaScript (javascript)

Explicación: Primero, debes seleccionar el elemento padre, en este caso, el div con id="seccion-principal". Una vez que lo tienes guardado en una variable, puedes usar esa variable para buscar elementos hijos dentro de él. elementoPadre.querySelector('p') solo devolverá el primer párrafo dentro de la seccion-principal, ignorando el párrafo que está en otra-seccion.

5.2. elementoPadre.querySelectorAll(selector)

De la misma forma, elementoPadre.querySelectorAll limita la búsqueda de múltiples elementos al contexto de un elemento padre.

HTML de ejemplo:

<nav class="menu-navegacion">
    <ul>
        <li><a href="#">Inicio</a></li>
        <li><a href="#">Acerca de</a></li>
        <li><a href="#">Contacto</a></li>
    </ul>
</nav>
<div class="menu-social">
    <ul>
        <li><a href="#">Facebook</a></li>
        <li><a href="#">Twitter</a></li>
    </ul>
</div>Lenguaje del código: HTML, XML (xml)

Accedemos con JavaScript:

// Seleccionamos el elemento padre, el menú de navegación
const menuNavegacion = document.querySelector('.menu-navegacion');

// Buscamos todos los enlaces DENTRO de ese menú
const enlacesDelMenu = menuNavegacion.querySelectorAll('a');

console.log(enlacesDelMenu);
// Resultado en la consola:
// NodeList(3) [a, a, a]

// ¿Qué pasaría si buscamos los enlaces desde el documento global?
const todosLosEnlaces = document.querySelectorAll('a');

console.log(todosLosEnlaces);
// Resultado en la consola:
// NodeList(5) [a, a, a, a, a]
// Esto es diferente, ya que también selecciona los enlaces del menú social.Lenguaje del código: JavaScript (javascript)

Explicación: Aquí tenemos dos listas (<ul>) con enlaces (<a>). Si solo quieres trabajar con los enlaces de la navegación principal, no te sirve de nada buscar todos los <a> del documento, ya que también te traería los enlaces de las redes sociales. Por eso, es mejor seleccionar el nav y luego buscar los enlaces solo dentro de él.

CONCLUSIÓN: Como puedes ver, este enfoque te da un control mucho más preciso y evita que tu código manipule elementos que no debería. Es una práctica estándar y una señal de que estás pensando como un desarrollador profesional.

6. Accediendo y navegando entre nodos del DOM

¿Qué significa navegar entre nodos del DOM?

Cuando ya accediste a un elemento del DOM, a veces no necesitás buscar otro con un selector, sino que te podés mover desde ese nodo a otros que estén relacionados jerárquicamente:

  • Su padre
  • Sus hijos
  • Sus hermanos

Esto se llama navegación del DOM, y te permite recorrer o modificar elementos relacionados entre sí.

¿Por qué es útil?

  1. Cuando Tenés Solo Una Referencia Inicial
    • Supongamos que capturás un botón (this o event.target) y querés acceder al párrafo que está al lado.
    • No tiene sentido hacer getElementById si ya estás cerca del nodo que querés.
  2. Para Manipular Estructuras Repetitivas
    • En listas, tarjetas o tablas, donde los elementos están agrupados o anidados.
    • Evitás usar muchos IDs o clases innecesarios.
  3. Para Mejorar la Escalabilidad
    • Tu código se adapta si hay más o menos elementos.
    • No dependés tanto de la estructura HTML fija.

6.1. elemento.parentNode

Este método te permite ascender en la jerarquía del DOM. Es tu forma de encontrar el «padre» o el contenedor directo de un elemento.

HTML de ejemplo:

<div id="contenedor-principal">
    <header>
        <h1>Título</h1>
        <p id="parrafo-hijo">Subtítulo</p>
    </header>
</div>Lenguaje del código: HTML, XML (xml)

Accedemos con JavaScript:

const parrafoHijo = document.getElementById('parrafo-hijo');

// Accedemos al elemento padre del párrafo, que es el <header>
const headerPadre = parrafoHijo.parentNode;

console.log(headerPadre);
// Resultado en la consola:
// <header><h1>Título</h1><p id="parrafo-hijo">Subtítulo</p></header>

// Accedemos al padre del header, que es el <div>
const contenedorPrincipal = headerPadre.parentNode;

console.log(contenedorPrincipal);
// Resultado en la consola:
// <div id="contenedor-principal">...</div>Lenguaje del código: JavaScript (javascript)

Explicación: Si tienes una referencia al <p>, parentNode te devolverá el elemento que lo contiene directamente, en este caso, el <header>. Si aplicas parentNode al <header>, te devolverá el <div> con id="contenedor-principal".

6.2. elemento.children

Con este método, desciendes un nivel en el árbol del DOM para encontrar a todos los «hijos» directos de un elemento.

HTML de ejemplo:

<ul id="lista-items">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>Lenguaje del código: HTML, XML (xml)

Accedemos con JavaScript:

const lista = document.getElementById('lista-items');

// Obtenemos una colección de los hijos directos del <ul>
const hijosDeLaLista = lista.children;

console.log(hijosDeLaLista);
// Resultado en la consola:
// HTMLCollection(3) [li, li, li]

// Accedemos al segundo hijo de la lista (el índice es 1)
console.log(hijosDeLaLista[1]);
// Resultado en la consola:
// <li>Item 2</li>Lenguaje del código: JavaScript (javascript)

Explicación: Si seleccionas el <ul>, children te dará una colección de sus elementos hijos, que en este caso son los tres <li>.

6.3. elemento.previousElementSibling

Este método te permite moverte entre los elementos «hermanos», yendo hacia atrás en el DOM.

HTML de ejemplo:

<ul>
    <li>Manzana</li>
    <li id="elemento-central">Banana</li>
    <li>Naranja</li>
</ul>Lenguaje del código: HTML, XML (xml)

Accedemos con JavaScript:

const elementoCentral = document.getElementById('elemento-central');

// Encontramos el elemento hermano anterior
const hermanoAnterior = elementoCentral.previousElementSibling;

console.log(hermanoAnterior);
// Resultado en la consola:
// <li>Manzana</li>Lenguaje del código: JavaScript (javascript)

Explicación: Si tienes una referencia al <li> con id="elemento-central", puedes usar previousElementSibling para encontrar el elemento que está justo antes que él, que en este caso es el <li> que contiene «Manzana».

6.4. elemento.nextElementSibling

Similar al anterior, pero te permite moverte entre los elementos «hermanos» yendo hacia adelante en el DOM.

HTML de ejemplo:

<ul>
    <li>Manzana</li>
    <li id="elemento-central">Banana</li>
    <li>Naranja</li>
</ul>Lenguaje del código: HTML, XML (xml)

Accedemos con JavaScript:

const elementoCentral = document.getElementById('elemento-central');

// Encontramos el elemento hermano siguiente
const hermanoSiguiente = elementoCentral.nextElementSibling;

console.log(hermanoSiguiente);
// Resultado en la consola:
// <li>Naranja</li>Lenguaje del código: JavaScript (javascript)

Explicación: Usando la misma referencia al <li> con id="elemento-central", nextElementSibling te dará el elemento que está justo después de él, que es el <li> que contiene «Naranja».

CONCLUSIÓN: Dominar la navegación entre nodos es una habilidad muy útil, especialmente en escenarios donde estás manejando interacciones dinámicas. Por ejemplo, al hacer clic en un botón, podrías usar parentNode para encontrar el contenedor del botón y luego usar nextElementSibling para mostrar un mensaje oculto.

7. HTMLCollection y NodeList.

Si prestaste atención en el desarrollo de los puntos anteriores, habrás visto que algunos de los métodos que vimos devuelven HTMLCollection y otro NodeList, pero…..

7.1. ¿Qué son HTMLCollection y NodeList?

Son tipos especiales de objetos similares a arrays que devuelve el navegador cuando usás ciertos métodos del DOM para acceder a múltiples elementos del documento HTML. En síntesis, son colecciones de nodos del DOM.

7.2. ¿Qué es una HTMLCollection?

Un HTMLCollection es una lista «en vivo» de elementos HTML.

Devuelta cuando usamos métodos como:

  • document.getElementsByTagName()
  • document.getElementsByClassName()
  • element.children

Características:

  • Solo contiene nodos tipo elemento (Element).
  • Se actualiza automáticamente si el DOM cambia.
  • Tiene propiedades como .length y podés acceder con índices: [0], [1], etc.
  • No soporta forEach() directamente (a menos que lo conviertas a array).

7.2. ¿Qué es un NodeList?

Un NodeList es una colección de nodos del DOM, que puede incluir:

  • Elementos HTML (<div>, <p>, etc.)
  • Nodos de texto
  • Comentarios
    (según cómo lo obtengas)

Devuelta cuando usamos métodos como:

  • document.querySelectorAll()
  • document.childNodes
  • element.childNodes

Características:

  • Puede ser estática (como la que devuelve querySelectorAll()).
  • Tiene .length, se accede por índice.
  • Soporta forEach() nativamente.
  • Puede contener más que solo elementos HTML (por ejemplo, nodos de texto si usás .childNodes).

7.4. Diferencias clave entre ambas:

CaracterísticaHTMLCollectionNodeList
¿Contiene solo elementos HTML?✅ Sí❌ No siempre (puede contener nodos de texto también)
¿Se actualiza automáticamente?✅ Sí (es en vivo)❌ No, es estático
¿Soporta forEach()?❌ No (a menos que conviertas a array)✅ Sí
¿Métodos que la devuelven?getElementsBy..., childrenquerySelectorAll, childNodes
¿Parecido a un array?✅ Pero no es un array real✅ Pero no es un array real

7.5. ¿Cuándo usar cada uno?

Usá querySelectorAll cuando:

  • Querés usar selectores CSS complejos.
  • Querés recorrer los elementos con forEach().
  • No vas a modificar el DOM después.

Usá getElementsBy... cuando:

  • Vas a agregar/quitar elementos dinámicamente.
  • Querés siempre tener la última versión de los elementos.

8. Iterar sobre colecciones de elementos una vez accedimos.

¿Qué es iterar sobre colecciones?

Cuando seleccionás múltiples elementos del DOM (por ejemplo con querySelectorAll), obtenés una colección (NodeList o HTMLCollection).
Iterar sobre esa colección significa recorrer cada elemento uno por uno para:

  • Leer datos
  • Modificarlos
  • Aplicar clases
  • Escuchar eventos, etc.

8.1. forEach (El más moderno y preferido)

El método forEach es la forma más limpia y moderna de iterar sobre una colección de elementos. Funciona directamente sobre los NodeList que devuelve querySelectorAll.

HTML de ejemplo:

<ul id="menu">
    <li class="item">Inicio</li>
    <li class="item">Productos</li>
    <li class="item">Contacto</li>
</ul>Lenguaje del código: HTML, XML (xml)

Accedemos con JavaScript e iteramos con bucle forEach : 

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

// Usamos forEach para iterar sobre la NodeList
items.forEach(item => {
    // En cada iteración, 'item' es un <li> individual
    console.log(item.textContent);
});

// Resultado en la consola:
// Inicio
// Productos
// ContactoLenguaje del código: JavaScript (javascript)

Explicación: forEach es un método que está disponible en los NodeList. Le pasas una función como argumento, y JavaScript ejecutará esa función una vez por cada elemento de la colección. Es muy legible y evita tener que lidiar con índices.

8.2. Bucle for (El método clásico)

El bucle for es el método tradicional para iterar. Funciona tanto con NodeList como con HTMLCollection (que es lo que devuelve getElementsByClassName).

HTML de ejemplo:

<div class="tarjeta">Tarjeta 1</div>
<div class="tarjeta">Tarjeta 2</div>
<div class="tarjeta">Tarjeta 3</div>Lenguaje del código: HTML, XML (xml)

Accedemos con JavaScript e iteramos con bucle for:

// Seleccionamos todos los elementos con la clase "tarjeta"
const tarjetas = document.getElementsByClassName('tarjeta');

// Usamos un bucle for clásico para iterar
for (let i = 0; i < tarjetas.length; i++) {
    // En cada iteración, tarjetas[i] es un <div> individual
    console.log(tarjetas[i].textContent);
}

// Resultado en la consola:
// Tarjeta 1
// Tarjeta 2
// Tarjeta 3Lenguaje del código: JavaScript (javascript)

Explicación: Con el bucle for clásico, defines un contador (i), y en cada iteración, accedes al elemento usando ese contador como índice. Es un método universal y funciona en cualquier versión de JavaScript, pero puede ser un poco más verboso que forEach.

8.3. Bucle for...of (Una opción elegante)

El bucle for...of es otra forma moderna de iterar que es muy legible. Es similar a forEach pero con una sintaxis diferente. Al igual que forEach, funciona directamente en NodeList.

HTML de ejemplo:

<p>Párrafo 1</p>
<p>Párrafo 2</p>Lenguaje del código: HTML, XML (xml)

Accedemos con JavaScript e iteramos con bucle for...of:

const parrafos = document.querySelectorAll('p');

// Usamos for...of para iterar sobre la NodeList
for (const parrafo of parrafos) {
    // En cada iteración, 'parrafo' es un <p> individual
    console.log(parrafo.textContent);
}

// Resultado en la consola:
// Párrafo 1
// Párrafo 2Lenguaje del código: JavaScript (javascript)

Explicación: El bucle for...of itera directamente sobre los valores de un objeto iterable (como un NodeList o un Array), lo que lo hace muy fácil de leer. No necesitas manejar los índices como en el bucle for clásico.

8.4. Array.from() (Cuando forEach no funciona)

Algunos métodos antiguos, como document.getElementsByClassName, devuelven un HTMLCollection que no tiene el método forEach. En estos casos, puedes convertir la colección en un array y luego usar forEach.

HTML de ejemplo:

<ul id="lista-numeros">
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>Lenguaje del código: HTML, XML (xml)

Accedemos con JavaScript e iteramos con bucle Array.from():

const listaItems = document.getElementsByTagName('li'); // Esto devuelve un HTMLCollection

console.log(listaItems.forEach);
// Resultado en la consola:
// undefined  (porque HTMLCollection no tiene forEach)

// Convertimos la colección en un array para poder usar forEach
const itemsArray = Array.from(listaItems);

itemsArray.forEach(item => {
    console.log(item.textContent);
});

// Resultado en la consola:
// 1
// 2
// 3Lenguaje del código: JavaScript (javascript)

Explicación: Array.from() toma un objeto «parecido a un array» (HTMLCollection, NodeList) y lo convierte en un array de verdad. Una vez que es un array, puedes usar todos sus métodos, incluyendo forEach.

CONCLUSIÓN: Mi recomendación profesional es usar querySelectorAll y forEach siempre que sea posible, ya que es la combinación más limpia y moderna. Si por alguna razón necesitas usar un método más antiguo, el bucle for clásico o Array.from() serán tus mejores opciones.

9. Buenas prácticas al acceder al DOM con JavaScript.

Estas prácticas son cruciales para construir aplicaciones web que sean escalables y robustas.

9.1. Guardar referencias importantes en variables y evitar búsquedas repetidas

Cada vez que usas un método como document.querySelector o document.getElementById, el navegador tiene que recorrer el DOM para encontrar el elemento. Si haces esto varias veces para el mismo elemento, estás desperdiciando recursos.

La solución es simple: selecciona el elemento una sola vez y guarda la referencia en una variable.

HTML de ejemplo

<button id="mi-boton">Haz clic</button>Lenguaje del código: HTML, XML (xml)

Guardamos referencia en variables:

// ❌ MAL EJEMPLO: Búsqueda repetida
document.getElementById('mi-boton').addEventListener('click', () => {
    document.getElementById('mi-boton').textContent = '¡Clickeado!';
});

// En este caso, el navegador busca el botón dos veces.
// Esto funciona, pero es ineficiente.

// ✅ BUEN EJEMPLO: Búsqueda única
const miBoton = document.getElementById('mi-boton');

if (miBoton) {
    miBoton.addEventListener('click', () => {
        miBoton.textContent = '¡Clickeado!';
    });
}

// Resultado en la consola (o en la página):
// El botón cambiará su texto a "¡Clickeado!" cuando se haga clic.
// Detrás de escena, el navegador es más eficiente porque solo buscó el elemento una vez.Lenguaje del código: JavaScript (javascript)

Explicación: En el «mal ejemplo,» se busca el botón en cada línea de código. Esto es ineficiente. En el «buen ejemplo,» el botón se busca una vez y la referencia se guarda en la variable miBoton, que luego se usa para todo lo demás.

9.2. Usar nombres descriptivos en las variables

Nombra tus variables de forma que sea obvio lo que representan. Esto hace que tu código sea legible para ti y para otros desarrolladores.

// ❌ MAL EJEMPLO: Nombres no descriptivos
const x = document.querySelector('#user-box');
x.style.backgroundColor = 'blue';

// ✅ BUEN EJEMPLO: Nombres descriptivos
const cajaDeUsuario = document.querySelector('#user-box');
if (cajaDeUsuario) {
    cajaDeUsuario.style.backgroundColor = 'blue';
}

// Resultado en la consola (o en la página):
// El elemento con el id "user-box" tendrá un fondo azul.
// La diferencia es la claridad del código.Lenguaje del código: JavaScript (javascript)

Explicación: En el «mal ejemplo,» x no nos dice nada. En el «buen ejemplo,» cajaDeUsuario es claro e indica que la variable contiene el elemento que representa la caja de un usuario.

9.3. No abusar de innerHTML (Riesgo de XSS)

innerHTML es muy útil para insertar código HTML, pero si insertas contenido que viene de un usuario sin validarlo, estás abriendo la puerta a ataques de Cross-Site Scripting (XSS).

El método textContent es mucho más seguro para manipular solo el texto.

HTML de ejemplo:

<div id="mensaje-bienvenida"></div>Lenguaje del código: HTML, XML (xml)

Ejemplo usando las dos formas:

// ❌ MAL EJEMPLO: Riesgo de seguridad
const mensaje = document.getElementById('mensaje-bienvenida');
const entradaDelUsuario = '<img src="invalida.jpg" onerror="alert(\'¡Hackeado!\')">';
// Esto podría ejecutar código malicioso
if (mensaje) {
    mensaje.innerHTML = entradaDelUsuario;
}

// ✅ BUEN EJEMPLO: Más seguro
const mensajeSeguro = document.getElementById('mensaje-bienvenida');
const entradaSegura = '<img src="invalida.jpg" onerror="alert(\'¡Hackeado!\')">';
if (mensajeSeguro) {
    mensajeSeguro.textContent = entradaSegura;
}

// Resultado en la consola (o en la página):
// En el mal ejemplo, podría aparecer una alerta si el navegador no lo bloquea.
// En el buen ejemplo, el texto literal '<img src="invalida.jpg" onerror="...">' se mostrará,
// pero no se ejecutará como código HTML.Lenguaje del código: JavaScript (javascript)

Explicación: En el «mal ejemplo,» el código podría permitir la inyección de scripts maliciosos. En el «buen ejemplo,» textContent solo inserta el texto sin interpretar el HTML, lo que evita el riesgo de XSS.

9.4. Validar si el documento está cargado

Tu código JavaScript no puede interactuar con elementos que aún no existen. Si tu script se ejecuta antes de que el navegador haya cargado el HTML, no encontrará nada y fallará.

La solución es ejecutar tu código después de que el DOM esté listo.

HTML de ejemplo:

<body>
    <h1 id="titulo">Cargando...</h1>
    <script src="mi-script.js"></script>
</body>Lenguaje del código: HTML, XML (xml)

Ejemplo para ejecutar el script despues del HTML

// ✅ BUEN EJEMPLO: Usando DOMContentLoaded
document.addEventListener('DOMContentLoaded', () => {
    const titulo = document.getElementById('titulo');
    if (titulo) {
        titulo.textContent = '¡El documento se ha cargado!';
        console.log('DOM cargado y título actualizado.');
    }
});

// ✅ Opcional: Colocar el script al final del <body>
// Si tu script está al final del body, no necesitas el evento,
// ya que el DOM ya estará disponible.

// Resultado en la consola (o en la página):
// El texto del h1 cambiará de "Cargando..." a "¡El documento se ha cargado!".
// Sin esta validación, si el script estuviera en el <head>, fallaría.Lenguaje del código: JavaScript (javascript)

Explicación: El método más común es usar el evento DOMContentLoaded. Este evento se dispara cuando el HTML del documento ha sido completamente cargado y parseado. Una alternativa más simple (pero menos flexible) es colocar la etiqueta <script> al final del <body>, ya que así el navegador procesa todo el HTML antes de ejecutar el script.

9.5. Manejo de elementos no encontrados

Cuando usas un método de selección como querySelector, getElementById, etc., siempre existe la posibilidad de que el elemento que buscas no exista en el documento HTML en ese momento.

Si intentas manipular un elemento que no existe, JavaScript te lanzará un error. Por ejemplo, si intentas acceder a la propiedad .value de un elemento que es null, obtendrás un error del tipo Cannot read properties of null.

La solución: Validación simple

La forma correcta de evitar este error es validar si el elemento existe antes de intentar hacer cualquier cosa con él.

HTML de ejemplo:

<body>
    <div id="app">
        <input type="text" class="input-nombre">
    </div>
    </body>Lenguaje del código: HTML, XML (xml)

Ejemplo validación simple con condicional if-else:

// Caso 1: El elemento existe y se manipula correctamente
const inputNombre = document.querySelector('.input-nombre');

if (inputNombre) {
  // El elemento fue encontrado, por lo que podemos manipularlo sin problemas
  inputNombre.value = "Juan Pérez";
  console.log('El input-nombre fue actualizado.');
} else {
  console.log('El input-nombre no fue encontrado.');
}
// Resultado en la consola:
// El input-nombre fue actualizado.


// Caso 2: El elemento NO existe, y el código lo maneja sin errores
const inputEmail = document.querySelector('.input-email');

if (inputEmail) {
  // Este bloque de código NUNCA se ejecutará
  inputEmail.value = "[email protected]";
  console.log('El input-email fue actualizado.');
} else {
  // El elemento no fue encontrado, por lo que este bloque se ejecuta
  console.log('El input-email no fue encontrado.');
}
// Resultado en la consola:
// El input-email no fue encontrado.Lenguaje del código: JavaScript (javascript)

Explicación: En el código JavaScript, buscamos un elemento con la clase .input-nombre y otro con la clase .input-email. El primero existe, pero el segundo no. Si intentamos manipular el segundo sin validación, nuestro programa fallará. La estructura if (variable) en JavaScript es perfecta para esto, ya que las variables que contienen elementos no encontrados (null) se evalúan como false.

Como puedes ver, la validación simple con un if te protege de errores y hace que tu código sea mucho más confiable. Siempre que busques un elemento que podría no existir, ¡recuerda validar antes de manipular!

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *