DOM (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
Guarda tu progreso
Inicia sesión para no perder tu progreso y accede a miles de tutoriales, ejercicios prácticos y nuestro asistente de IA.
Más de 25.000 desarrolladores ya confían en CertiDevs
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.
Completa JavaScript y certifícate
Únete a nuestra plataforma y accede a miles de tutoriales, ejercicios prácticos, proyectos reales y nuestro asistente de IA personalizado para acelerar tu aprendizaje.
Asistente IA
Resuelve dudas al instante
Ejercicios
Practica con proyectos reales
Certificados
Valida tus conocimientos
Más de 25.000 desarrolladores ya se han certificado con CertiDevs