JavaScript: DOM
Descubre cómo manipular el DOM con JavaScript para modificar contenido, estilos y estructura HTML de forma dinámica y eficiente.
Aprende JavaScript GRATIS y certifícateDOM (Document Object Model)
El Document Object Model representa la estructura de un documento HTML como un árbol de objetos que JavaScript puede manipular dinámicamente. Esta interfaz de programación permite acceder, modificar y actualizar el contenido, estructura y estilo de las páginas web en tiempo real.
Estructura del DOM
El DOM organiza los elementos HTML en una jerarquía de nodos donde cada etiqueta, atributo y texto se convierte en un objeto manipulable. El documento completo se representa como un árbol donde el nodo raíz es document, seguido por el elemento <html>, que contiene <head> y <body>, y así sucesivamente.
// Acceso al documento completo
console.log(document);
// Acceso al elemento raíz HTML
console.log(document.documentElement);
// Acceso al body del documento
console.log(document.body);
Esta representación jerárquica permite navegar entre elementos utilizando relaciones familiares como padre, hijo y hermano, facilitando la manipulación precisa de cualquier parte del documento.
Selección de elementos
JavaScript proporciona múltiples métodos para localizar elementos específicos dentro del DOM. Los selectores más utilizados incluyen getElementById(), querySelector() y querySelectorAll().
// Selección por ID
const titulo = document.getElementById('titulo-principal');
// Selección por selector CSS
const primerParrafo = document.querySelector('p');
const todosLosParrafos = document.querySelectorAll('p');
// Selección por clase
const elementos = document.getElementsByClassName('destacado');
El método querySelector() acepta cualquier selector CSS válido, lo que proporciona flexibilidad para selecciones complejas utilizando combinadores, pseudo-clases y atributos.
Manipulación de contenido
Una vez seleccionados los elementos, JavaScript permite modificar su contenido textual y estructura HTML mediante propiedades como textContent, innerHTML y innerText.
const elemento = document.getElementById('mensaje');
// Modificar solo el texto
elemento.textContent = 'Nuevo contenido de texto';
// Modificar HTML interno
elemento.innerHTML = '<strong>Texto en negrita</strong>';
// Obtener el contenido actual
const contenidoActual = elemento.textContent;
La propiedad innerHTML permite insertar código HTML completo, mientras que textContent maneja únicamente texto plano, proporcionando mayor seguridad contra inyecciones de código malicioso.
Modificación de atributos
Los atributos HTML se pueden leer, modificar y eliminar dinámicamente utilizando métodos específicos del DOM. Esta funcionalidad resulta esencial para cambiar comportamientos y propiedades de los elementos.
const imagen = document.querySelector('img');
// Obtener valor de atributo
const rutaImagen = imagen.getAttribute('src');
// Establecer nuevo atributo
imagen.setAttribute('alt', 'Descripción de la imagen');
// Modificar atributos comunes directamente
imagen.src = 'nueva-imagen.jpg';
imagen.className = 'imagen-destacada';
Los atributos booleanos como disabled, checked o hidden se manejan como propiedades JavaScript que aceptan valores true o false.
Manipulación de estilos CSS
El DOM permite modificar los estilos CSS de los elementos tanto mediante la propiedad style para estilos inline como mediante la manipulación de clases CSS.
const caja = document.getElementById('caja');
// Modificar estilos inline
caja.style.backgroundColor = '#3498db';
caja.style.padding = '20px';
caja.style.borderRadius = '8px';
// Manipular clases CSS
caja.classList.add('activo');
caja.classList.remove('inactivo');
caja.classList.toggle('destacado');
La manipulación de clases mediante classList resulta más eficiente y mantenible que modificar estilos individuales, ya que permite aprovechar las hojas de estilo existentes.
Creación y eliminación de elementos
JavaScript permite crear elementos completamente nuevos y añadirlos al DOM, así como eliminar elementos existentes de forma dinámica.
// Crear nuevo elemento
const nuevoParrafo = document.createElement('p');
nuevoParrafo.textContent = 'Este es un párrafo creado dinámicamente';
nuevoParrafo.className = 'parrafo-dinamico';
// Añadir al DOM
document.body.appendChild(nuevoParrafo);
// Eliminar elemento existente
const elementoAEliminar = document.getElementById('temporal');
elementoAEliminar.remove();
Los métodos appendChild(), insertBefore() y replaceChild() proporcionan control preciso sobre dónde y cómo se insertan los nuevos elementos en la estructura del documento.
Navegación entre nodos
El DOM permite navegar entre elementos relacionados utilizando propiedades que representan las relaciones familiares dentro del árbol de nodos.
const elemento = document.getElementById('contenido');
// Navegación hacia arriba
const padre = elemento.parentNode;
const contenedor = elemento.closest('.contenedor');
// Navegación hacia abajo
const primerHijo = elemento.firstElementChild;
const ultimoHijo = elemento.lastElementChild;
const todosLosHijos = elemento.children;
// Navegación lateral
const siguienteHermano = elemento.nextElementSibling;
const hermanoAnterior = elemento.previousElementSibling;
Esta navegación relacional resulta especialmente útil cuando se necesita manipular elementos basándose en su posición estructural más que en identificadores específicos.
Lecciones de este módulo de JavaScript
Lecciones de programación del módulo DOM del curso de JavaScript.
Ejercicios de programación en este módulo de JavaScript
Evalúa tus conocimientos en DOM con ejercicios de programación DOM de tipo Test, Puzzle, Código y Proyecto con VSCode.