DOM (Document Object Model)
El DOM es una representación del documento HTML como un árbol de objetos que puede ser manipulado con JavaScript.
¿Qué es el DOM?
Imagina que tu página web HTML es como un árbol genealógico - cada elemento tiene padres, hijos y hermanos, y puedes navegar entre ellos.
El DOM (Document Object Model) es la representación que hace el navegador de tu página HTML como una estructura de árbol de objetos. Es como tener un mapa detallado de todos los elementos de tu página que JavaScript puede leer y modificar.
El DOM permite:
- Acceder a cualquier elemento - Encontrar botones, imágenes, textos específicos
- Modificar contenido dinámicamente - Cambiar textos, colores, tamaños sin recargar
- Responder a acciones del usuario - Detectar clics, teclas presionadas, movimientos del mouse
- Añadir o eliminar elementos - Crear nuevos elementos o quitar existentes
- Navegar entre elementos - Moverse de padres a hijos, entre hermanos
Sin el DOM, las páginas web serían estáticas como documentos impresos. Con el DOM, JavaScript puede "conversar" con HTML y hacer que las páginas respondan e interactúen con los usuarios en tiempo real.
Estructura del DOM
<!DOCTYPE html>
<html>
<head>
<title>Mi Página</title>
</head>
<body>
<h1 id="titulo">Hola Mundo</h1>
<p class="parrafo">Este es un párrafo</p>
</body>
</html>
Árbol DOM resultante:
Document
└── html
├── head
│ └── title
│ └── "Mi Página"
└── body
├── h1 (id="titulo")
│ └── "Hola Mundo"
└── p (class="parrafo")
└── "Este es un párrafo"
Selección de Elementos
// Por ID
const titulo = document.getElementById('titulo');
// Por clase
const parrafos = document.getElementsByClassName('parrafo');
// Por etiqueta
const titulos = document.getElementsByTagName('h1');
// Selectores CSS (recomendado)
const elemento = document.querySelector('#titulo');
const elementos = document.querySelectorAll('.parrafo');
Manipulación de Contenido
// Cambiar texto
elemento.textContent = 'Nuevo texto';
elemento.innerHTML = '<strong>Texto en negrita</strong>';
// Cambiar atributos
elemento.setAttribute('class', 'nueva-clase');
elemento.id = 'nuevo-id';
// Cambiar estilos
elemento.style.color = 'red';
elemento.style.fontSize = '20px';
Creación y Eliminación
// Crear elemento
const nuevoDiv = document.createElement('div');
nuevoDiv.textContent = 'Contenido nuevo';
// Añadir al DOM
document.body.appendChild(nuevoDiv);
// Eliminar elemento
elemento.remove();
// o
elemento.parentNode.removeChild(elemento);
Eventos del DOM
// Añadir evento
elemento.addEventListener('click', function() {
console.log('Elemento clickeado');
});
// Eventos comunes
elemento.addEventListener('mouseover', manejarHover);
elemento.addEventListener('submit', manejarFormulario);
document.addEventListener('DOMContentLoaded', inicializar);
Navegación por el DOM
// Relaciones familiares
const padre = elemento.parentNode;
const hijos = elemento.children;
const hermanoSiguiente = elemento.nextElementSibling;
const hermanoAnterior = elemento.previousElementSibling;
Relacionado
- HTML - Estructura que forma el DOM
- JavaScript - Lenguaje para manipular el DOM
- CSS - Estilos aplicados vía DOM
- Event Handling - Manejo de eventos
- Virtual DOM - Abstracción del DOM