Ir al contenido principal

¿Qué es el DOM?

Introducción

Cuando navegamos por internet y visitamos páginas web, lo que vemos en pantalla son elementos visibles como textos, imágenes, botones y formularios. Sin embargo, para que JavaScript pueda interactuar con estos elementos, necesita una representación estructurada de la página. Aquí es donde entra el DOM (Document Object Model).

El DOM es una interfaz de programación que representa documentos HTML y XML como un árbol de objetos, permitiendo que los programas puedan acceder y modificar el contenido, la estructura y el estilo de un documento web. Es el puente entre el código HTML estático y la interactividad dinámica que JavaScript puede proporcionar.

Definición del Document Object Model

El DOM (Modelo de Objetos del Documento) es una API (Interfaz de Programación de Aplicaciones) que representa un documento HTML o XML como un árbol de nodos. Cada parte del documento, como elementos, atributos y texto, se convierte en un nodo en este árbol.

El DOM no es parte de JavaScript, sino una especificación independiente establecida por el W3C (World Wide Web Consortium) que define cómo deben estructurarse y accederse los documentos web. JavaScript utiliza esta API para interactuar con los documentos HTML.

// Ejemplo sencillo de acceso al DOM
const parrafo = document.getElementById("miParrafo");
parrafo.textContent = "Este texto ha sido modificado con JavaScript";

En este ejemplo, usamos el DOM para:

  1. Acceder a un elemento HTML mediante su ID
  2. Modificar su contenido de texto

Relación entre HTML, JavaScript y DOM

Para entender completamente el DOM, debemos comprender cómo se relacionan estos tres componentes:

  1. HTML: Es el código fuente que define la estructura y el contenido de la página web.
  2. DOM: Es la representación en memoria de ese HTML después de ser analizado por el navegador.
  3. JavaScript: Es el lenguaje que utilizamos para manipular el DOM.
<!-- Archivo HTML -->
<!DOCTYPE html>
<html>
<head>
    <title>Mi página</title>
</head>
<body>
    <h1 id="titulo">Hola Mundo</h1>
    <p>Este es un párrafo de ejemplo</p>
</body>
</html>

Cuando el navegador carga este HTML, crea una representación en memoria (el DOM) que JavaScript puede manipular:

// JavaScript manipulando el DOM
const tituloElemento = document.getElementById("titulo");
console.log(tituloElemento.textContent); // Muestra: "Hola Mundo"
tituloElemento.textContent = "¡Hola DOM!";
// Ahora el h1 en la página muestra "¡Hola DOM!" en lugar de "Hola Mundo"

Es importante destacar que el DOM no es el código HTML original, sino una representación en memoria que puede diferir del HTML original, especialmente después de aplicar JavaScript que modifica la estructura.

Estructura en forma de árbol

El DOM organiza todos los elementos del documento en una estructura jerárquica llamada "árbol de nodos". Esta estructura comienza con un nodo raíz (el documento) del que se ramifican todos los demás elementos.

Veamos cómo se representa un HTML sencillo en forma de árbol DOM:

<!DOCTYPE html>
<html>
<head>
    <title>Ejemplo</title>
</head>
<body>
    <h1>Título Principal</h1>
    <div>
        <p>Párrafo dentro de un div</p>
    </div>
</body>
</html>

La estructura de árbol para este HTML sería algo así:

document
└── html
    ├── head
    │   └── title
    │       └── "Ejemplo" (nodo de texto)
    └── body
        ├── h1
        │   └── "Título Principal" (nodo de texto)
        └── div
            └── p
                └── "Párrafo dentro de un div" (nodo de texto)

Esta estructura jerárquica permite a JavaScript navegar fácilmente entre los elementos usando términos como "padre", "hijo" y "hermano":

const div = document.querySelector("div");
const h1 = div.previousElementSibling; // Obtiene el h1 (hermano anterior del div)
const p = div.firstElementChild; // Obtiene el párrafo (primer hijo del div)
const body = div.parentElement; // Obtiene el body (padre del div)

Tipos de nodos

En el DOM, no todos los nodos son iguales. Existen diferentes tipos de nodos que representan diferentes partes del documento:

  1. Nodos de elemento: Representan etiquetas HTML como <div>, <p>, <h1>, etc.
  2. Nodos de texto: Contienen el texto que aparece dentro de los elementos.
  3. Nodos de atributo: Representan los atributos de los elementos HTML como id, class, etc.
  4. Nodos de comentario: Representan comentarios en el HTML (<!-- comentario -->).
  5. Nodo documento: El nodo raíz que representa todo el documento.
  6. Nodos de tipo doctype: Representan la declaración doctype.

Cada tipo de nodo tiene propiedades y métodos específicos. Por ejemplo:

// Crear un nuevo elemento (nodo de elemento)
const nuevoElemento = document.createElement("div");

// Crear un texto (nodo de texto)
const textoNuevo = document.createTextNode("Este es un texto nuevo");

// Añadir el texto al elemento
nuevoElemento.appendChild(textoNuevo);

// Añadir un atributo (no crea un nodo de atributo separado en el DOM moderno)
nuevoElemento.setAttribute("id", "miNuevoDiv");

// Crear un comentario (nodo de comentario)
const comentario = document.createComment("Este es un comentario");

// Añadir todo al documento
document.body.appendChild(nuevoElemento);
document.body.appendChild(comentario);

JavaScript nos proporciona constantes para identificar cada tipo de nodo:

// Comprobar el tipo de nodo
const parrafo = document.querySelector("p");
if (parrafo.nodeType === Node.ELEMENT_NODE) {
    console.log("Es un elemento");
}

const texto = parrafo.firstChild;
if (texto.nodeType === Node.TEXT_NODE) {
    console.log("Es un nodo de texto");
}

El objeto document

El objeto document es el punto de entrada al DOM. Representa todo el documento HTML y proporciona métodos para acceder y manipular elementos dentro de él.

Este objeto es una instancia de la interfaz Document y está disponible globalmente en el navegador como una propiedad del objeto window (aunque generalmente accedemos a él directamente como document).

Algunas de las propiedades y métodos más utilizados del objeto document son:

// Acceder a elementos
const elemento = document.getElementById("miElemento");
const elementos = document.getElementsByClassName("miClase");
const parrafos = document.getElementsByTagName("p");
const primerDiv = document.querySelector("div");
const todosLosInputs = document.querySelectorAll("input");

// Crear elementos
const nuevoDiv = document.createElement("div");
const nuevoTexto = document.createTextNode("Hola mundo");

// Acceder a partes especiales del documento
const head = document.head;
const body = document.body;
const html = document.documentElement;
const titulo = document.title;

// Información sobre el documento
const url = document.URL;
const cookies = document.cookie;
const ultimaModificacion = document.lastModified;

El objeto document también nos permite escuchar eventos que ocurren en cualquier parte del documento:

// Escuchar el evento click en cualquier parte del documento
document.addEventListener("click", function(evento) {
    console.log("Se hizo clic en:", evento.target);
});

// Escuchar cuando el documento termine de cargarse
document.addEventListener("DOMContentLoaded", function() {
    console.log("El DOM ha sido completamente cargado");
});

Interacción entre el usuario y el DOM

Una de las principales razones por las que el DOM es tan importante es que permite crear páginas web interactivas que responden a las acciones del usuario.

Cuando un usuario interactúa con una página web (haciendo clic, escribiendo, deslizando, etc.), se generan eventos que JavaScript puede detectar y responder a ellos modificando el DOM:

// Crear elementos interactivos
const boton = document.createElement("button");
boton.textContent = "Haz clic aquí";
document.body.appendChild(boton);

// Añadir interactividad
boton.addEventListener("click", function() {
    // Crear un nuevo elemento cuando se hace clic
    const mensaje = document.createElement("p");
    mensaje.textContent = "¡Has hecho clic en el botón!";
    document.body.appendChild(mensaje);
    
    // Cambiar estilo del botón
    this.style.backgroundColor = "green";
    this.style.color = "white";
});

Este patrón de escuchar eventos del usuario y responder modificando el DOM es la base de la interactividad en las aplicaciones web modernas.

Diferencias entre HTML fuente y DOM

Es crucial entender que el DOM no es exactamente el mismo que el código HTML original. Algunas diferencias importantes son:

  1. Corrección automática de errores: El navegador intenta corregir errores en el HTML al construir el DOM.

    <!-- HTML original con error -->
<div>
  <p>Texto sin cerrar
</div>

<!-- DOM resultante (el navegador añade </p> automáticamente) -->
<div>
  <p>Texto sin cerrar</p>
</div>

  2. Elementos añadidos dinámicamente: JavaScript puede modificar el DOM añadiendo, eliminando o modificando elementos, lo que cambia la estructura respecto al HTML original.

  3. Generación de elementos implícitos: Algunos elementos pueden ser generados por el navegador aunque no estén en el HTML original:

    <!-- HTML original -->
<table>
  <tr>
    <td>Celda</td>
  </tr>
</table>

<!-- DOM resultante (el navegador añade <tbody> implícitamente) -->
<table>
  <tbody>
    <tr>
      <td>Celda</td>
    </tr>
  </tbody>
</table>

  4. Normalización de atributos: El DOM normaliza ciertos atributos y propiedades.

    <!-- HTML original -->
<input value="hola" disabled>

<!-- En el DOM, disabled se convierte en una propiedad booleana -->
input.disabled === true

Estas diferencias son importantes al trabajar con JavaScript, ya que tu código interactúa con el DOM, no con el HTML original.

Visualización del DOM en devtools

Los navegadores modernos proporcionan herramientas para desarrolladores (DevTools) que permiten explorar y manipular el DOM en tiempo real. Esta es una herramienta invaluable para depurar problemas relacionados con el DOM.

Para acceder a las DevTools:

  • En Chrome/Edge: Presiona F12 o haz clic derecho en la página y selecciona "Inspeccionar".
  • En Firefox: Presiona F12 o haz clic derecho y selecciona "Inspeccionar elemento".
  • En Safari: Primero debes habilitar las herramientas de desarrollo en Preferencias > Avanzado.

Estas herramientas te permiten:

  1. Explorar la estructura del DOM: Ver todos los elementos y su jerarquía.
  2. Modificar elementos en tiempo real: Cambiar texto, atributos y estilos.
  3. Depurar eventos: Ver qué eventos están asociados a cada elemento.
  4. Probar código JavaScript: Ejecutar comandos que manipulan el DOM.

Por ejemplo, en la consola de DevTools, puedes ejecutar:

// Seleccionar un elemento
const titulo = document.querySelector("h1");

// Modificarlo
titulo.style.color = "red";

// Ver sus propiedades
console.dir(titulo);

// Ver su HTML
console.log(titulo.outerHTML);

Esta capacidad de interactuar con el DOM directamente desde la consola facilita enormemente el desarrollo y la depuración de código JavaScript.

Resumen

El DOM (Document Object Model) es la representación en memoria de un documento HTML que permite a JavaScript interactuar con la página web. Estructura el documento como un árbol de nodos donde cada elemento, atributo y texto es un nodo separado, facilitando su manipulación programática.

A través del DOM, JavaScript puede acceder a cualquier elemento de la página, modificar su contenido, cambiar sus estilos, responder a eventos de usuario y crear una experiencia interactiva. La comprensión del DOM es fundamental para el desarrollo web, ya que es el puente que conecta el HTML estático con la interactividad dinámica proporcionada por JavaScript.

En los próximos artículos, profundizaremos en las técnicas específicas para seleccionar, modificar y crear elementos en el DOM, así como para gestionar eventos y responder a las interacciones del usuario.

Volver arriba