Descripción del curso JavaScript DOM
El Document Object Model (DOM) es una interfaz de programación fundamental para documentos HTML y XML que representa la estructura de un documento como un árbol de objetos. Esta representación permite a JavaScript acceder y manipular dinámicamente el contenido, estructura y estilo de una página web.
Fundamentos del DOM
El DOM convierte cada elemento HTML en un nodo dentro de una estructura jerárquica que refleja fielmente la organización del documento. Esta estructura arbórea comienza con el objeto document, que representa la página completa y actúa como punto de entrada para acceder a todos los elementos.
La comprensión del DOM es esencial para cualquier desarrollador web moderno, ya que constituye el puente entre el HTML estático y las aplicaciones web dinámicas e interactivas que los usuarios esperan hoy en día.
// El objeto document es el punto de entrada al DOM
console.log(document.doctype);
console.log(document.documentElement); // Elemento <html>
console.log(document.head); // Elemento <head>
console.log(document.body); // Elemento <body>
Selección de elementos
JavaScript ofrece múltiples métodos para localizar y seleccionar elementos específicos dentro del DOM. Estos selectores permiten identificar elementos por su ID, clase, nombre de etiqueta o mediante selectores CSS más complejos.
- getElementById: Encuentra un elemento por su atributo ID único
const header = document.getElementById('main-header');
- getElementsByClassName: Selecciona elementos por su clase
const items = document.getElementsByClassName('item');
- querySelector: Utiliza selectores CSS para encontrar el primer elemento que coincida
const firstButton = document.querySelector('button.primary');
- querySelectorAll: Devuelve todos los elementos que coinciden con el selector
const allLinks = document.querySelectorAll('a[href^="https"]');
La capacidad de seleccionar elementos con precisión es la base para cualquier manipulación posterior del DOM.
Manipulación del 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 de diversas formas:
- textContent: Modifica o accede al contenido de texto plano
const title = document.querySelector('h1');
title.textContent = 'Nuevo título de la página';
- innerHTML: Permite insertar o modificar contenido HTML
const container = document.querySelector('.container');
container.innerHTML = '<p>Este párrafo <strong>reemplaza</strong> todo el contenido anterior</p>';
- Creación de elementos: Para un enfoque más estructurado
const newDiv = document.createElement('div');
newDiv.textContent = 'Elemento creado dinámicamente';
document.body.appendChild(newDiv);
Esta capacidad de manipulación permite actualizar la interfaz de usuario en respuesta a acciones del usuario o cambios en los datos sin necesidad de recargar la página.
Modificación de atributos y estilos
El DOM facilita la alteración dinámica de atributos HTML y propiedades CSS:
- Atributos estándar:
const link = document.querySelector('a');
link.href = 'https://ejemplo.com';
link.setAttribute('target', '_blank');
- Clases CSS:
const element = document.querySelector('.item');
element.classList.add('active');
element.classList.remove('hidden');
element.classList.toggle('selected');
- Estilos inline:
const box = document.querySelector('.box');
box.style.backgroundColor = '#3498db';
box.style.padding = '20px';
box.style.borderRadius = '5px';
Esta capacidad permite crear interfaces adaptativas que responden visualmente a las interacciones del usuario.
Sistema de eventos
El sistema de eventos del DOM permite que las aplicaciones web respondan a las interacciones del usuario y otros cambios en el entorno:
- Asignación de eventos básica:
const button = document.querySelector('button');
button.onclick = function() {
alert('Botón pulsado');
};
- Event Listeners modernos:
const form = document.querySelector('form');
form.addEventListener('submit', function(event) {
event.preventDefault();
console.log('Formulario enviado');
});
- Propagación de eventos:
document.querySelector('.container').addEventListener('click', function(event) {
if (event.target.matches('.btn-delete')) {
console.log('Botón de eliminar pulsado');
}
}, false);
Los eventos son el corazón de la interactividad web, permitiendo crear aplicaciones que responden de manera fluida a las acciones del usuario.
Almacenamiento en el navegador
El DOM se complementa con APIs de almacenamiento que permiten persistir datos en el navegador:
- localStorage: Almacenamiento persistente sin fecha de expiración
// Guardar datos
localStorage.setItem('username', 'usuario123');
// Recuperar datos
const username = localStorage.getItem('username');
// Eliminar datos
localStorage.removeItem('username');
- sessionStorage: Almacenamiento que dura solo durante la sesión actual
sessionStorage.setItem('temporalData', JSON.stringify({id: 1, status: 'active'}));
Estas APIs permiten crear aplicaciones web con estado persistente incluso cuando el usuario navega entre páginas o cierra y reabre el navegador.
Browser Object Model (BOM)
El BOM proporciona objetos adicionales proporcionados por el navegador para interactuar con la ventana del navegador:
- window: El objeto global del navegador
// Abrir nueva ventana
const newWindow = window.open('https://ejemplo.com', '_blank');
// Redireccionar
window.location.href = 'https://nuevapagina.com';
- navigator: Información sobre el navegador y el sistema
console.log(navigator.userAgent);
console.log(navigator.language);
- history: Historial de navegación
// Navegar hacia atrás
history.back();
// Navegar hacia adelante
history.forward();
- screen: Información sobre la pantalla del usuario
console.log(`Resolución: ${screen.width}x${screen.height}`);
El BOM extiende las capacidades del DOM permitiendo a las aplicaciones web interactuar con el navegador mismo, no solo con el contenido del documento.
Aplicaciones prácticas
El DOM y sus tecnologías asociadas permiten crear una amplia gama de funcionalidades interactivas:
- Validación de formularios en tiempo real
- Interfaces de usuario dinámicas que se actualizan sin recargar la página
- Animaciones y transiciones controladas por JavaScript
- Aplicaciones de una sola página (SPA)
- Gestores de tareas y aplicaciones de productividad
- Juegos basados en navegador
- Administradores de contenido del lado del cliente
Dominar el DOM es fundamental para crear experiencias web modernas que sean rápidas, interactivas y atractivas para los usuarios.
Buenas prácticas
Para trabajar eficientemente con el DOM, es importante seguir ciertas prácticas recomendadas:
- Minimizar las manipulaciones directas del DOM para mejorar el rendimiento
- Utilizar la delegación de eventos para manejar múltiples elementos similares
- Agrupar las modificaciones del DOM para reducir el reflow y repaint
- Preferir classList sobre manipulación directa de la propiedad className
- Utilizar fragmentos de documento para insertar múltiples elementos
- Cachear referencias a elementos DOM que se utilizan repetidamente
- Separar la lógica de la aplicación de la manipulación del DOM
// Mal enfoque: múltiples manipulaciones individuales
for (let i = 0; i < 100; i++) {
document.body.innerHTML += `<div>Elemento ${i}</div>`;
}
// Buen enfoque: manipulación agrupada
const fragment = document.createDocumentFragment();
for (let i = 0; i < 100; i++) {
const div = document.createElement('div');
div.textContent = `Elemento ${i}`;
fragment.appendChild(div);
}
document.body.appendChild(fragment);
Estas prácticas ayudan a crear aplicaciones web más eficientes y mantenibles.
Compatibilidad entre navegadores
Aunque los navegadores modernos han estandarizado en gran medida la implementación del DOM, todavía existen algunas diferencias sutiles que los desarrolladores deben tener en cuenta:
- Verificar la compatibilidad de características nuevas en sitios como MDN o caniuse.com
- Utilizar polyfills para características no soportadas en navegadores antiguos
- Probar el código en múltiples navegadores
- Considerar el uso de bibliotecas o frameworks que abstraen las diferencias entre navegadores
El conocimiento de estas consideraciones de compatibilidad es crucial para desarrollar aplicaciones web robustas que funcionen consistentemente en diferentes entornos.
Completa este curso de programación JavaScript DOM y certifícate
Únete a nuestra plataforma de cursos de programación y accede a rutas de aprendizaje estructuradas, ejercicios prácticos, proyectos reales y nuestro asistente de IA personalizado para acelerar tu aprendizaje.
Asistente IA
Resuelve dudas al instante
Ejercicios código
Practica con proyectos reales
Certificados
Valida tus conocimientos
Más de 25.000 desarrolladores ya se han certificado con CertiDevs