Modelo de Objetos del Documento (DOM)

Conceptos y uso

El Modelo de Objetos del Documento (DOM) es una interfaz de programacin para documentos web. Representa la pgina de modo que los programas puedan cambiar la estructura, el estilo y el contenido del documento. El DOM representa el documento como nodos y objetos; de esta forma, los lenguajes de programacin pueden interactuar con la pgina.

Una pgina web es un documento que puede visualizarse en la ventana del navegador o como cdigo fuente HTML. En ambos casos se trata del mismo documento, pero la representacin mediante el Modelo de Objetos del Documento (DOM) permite manipularlo. Al ser una representacin de la pgina web orientada a objetos, se puede modificar con un lenguaje de scripting, como JavaScript.

Por ejemplo, el DOM especifica que el mtodo querySelectorAll de este fragmento de cdigo debe devolver una lista con todos los elementos <p> del documento:

const paragraphs = document.querySelectorAll("p");
// paragraphs[0] es el primer elemento <p>
// paragraphs[1] es el segundo elemento <p>, etc.
alert(paragraphs[0].nodeName);

Todas las propiedades, mtodos y eventos disponibles para manipular y crear pginas web estn organizados en objetos. Por ejemplo, el objeto document, que representa el propio documento, y los objetos table, que implementan la interfaz DOM HTMLTableElement para acceder a las tablas HTML, son objetos, igual que todos los dems.

El DOM se construye con varias API que funcionan en conjunto. El ncleo del DOM define las entidades que describen cualquier documento y los objetos que contiene. Esta estructura se ampla, segn sea necesario, mediante otras API que aaden nuevas caractersticas y capacidades al DOM. Por ejemplo, la API DOM HTML aade al ncleo del DOM la capacidad de representar documentos HTML, mientras que la API SVG aade la capacidad de representar documentos SVG.

Qu es un rbol DOM?

Un rbol DOM es una estructura de rbol cuyos nodos representan el contenido de un documento HTML o XML. Cada documento HTML o XML tiene una representacin en forma de rbol DOM. Por ejemplo, considera el siguiente documento:

<html lang="es">
  <head>
    <title>Mi documento</title>
  </head>
  <body>
    <h1>Encabezado</h1>
    <p>Prrafo</p>
  </body>
</html>

Tiene un rbol DOM que se ve as:

[El DOM como representacin en forma de rbol de un documento, con un elemento raz y nodos que contienen el contenido]

Aunque el rbol de arriba se parece al rbol DOM del documento anterior, no son idnticos, ya que el rbol DOM real conserva los espacios en blanco.

Cuando un navegador web analiza un documento HTML, construye un rbol DOM y luego lo usa para mostrar el documento.

DOM y JavaScript

El breve ejemplo anterior, como casi todos los ejemplos, es JavaScript. Es decir, est escrito en JavaScript, pero usa el DOM para acceder al documento y a sus elementos. El DOM no es un lenguaje de programacin, pero sin l, el lenguaje JavaScript no tendra ningn modelo ni nocin de las pginas web, los documentos HTML, los documentos SVG ni sus componentes. El documento en su conjunto, la cabecera del documento, las tablas, los encabezados de tabla, el texto de las celdas y el resto de los elementos de un documento son partes del Modelo de Objetos del Documento de ese documento. Todos ellos se pueden consultar y manipular mediante el DOM y un lenguaje de scripting como JavaScript.

El DOM no forma parte del lenguaje JavaScript, sino que es una API web que se usa para crear sitios web. JavaScript tambin se puede usar en otros contextos. Por ejemplo, Node.js ejecuta programas de JavaScript en un equipo, pero ofrece un conjunto de API distinto, y la API del DOM no forma parte del ncleo del entorno de ejecucin de Node.js.

El DOM se dise para ser independiente de cualquier lenguaje de programacin especfico, lo que permite acceder a la representacin estructural del documento a travs de una API nica y coherente. Aunque la mayora de los desarrolladores web solo utilicen el DOM a travs de JavaScript, se pueden crear implementaciones del DOM para cualquier lenguaje, como demuestra este ejemplo en Python:

# Ejemplo de DOM en Python
import xml.dom.minidom as m
doc = m.parse(r"C:\Projects\Py\chap1.xml")
doc.nodeName # propiedad DOM del objeto document
p_list = doc.getElementsByTagName("para")

Para ms informacin sobre las tecnologas que intervienen al escribir JavaScript para la web, consulta la Descripcin general de las tecnologas de JavaScript.

Acceso al DOM

No necesitas hacer nada especial para empezar a usar el DOM. Usas la API directamente en JavaScript desde lo que se denomina un script, un programa que ejecuta el navegador.

Cuando creas un script, ya sea insertado directamente mediante un elemento <script> o incluido en la pgina web, puedes empezar a usar de inmediato la API de los objetos document o window para manipular el propio documento o cualquiera de los elementos de la pgina web (los elementos descendientes del documento). Tu programacin con el DOM puede ser tan sencilla como el siguiente ejemplo, que muestra un mensaje en la consola mediante la funcin console.log():

<body >
  
</body>

Dado que, por lo general, no se recomienda mezclar la estructura de la pgina (escrita en HTML) con la manipulacin del DOM (escrita en JavaScript), aqu las partes de JavaScript se agruparn y se mantendrn separadas del HTML.

Por ejemplo, la siguiente funcin crea un nuevo elemento h1, le aade texto y, a continuacin, lo incorpora al rbol del documento:

<html lang="es">
  <head> </head>
  <body>
    <script>
      // crea un par de elementos en una pgina HTML que, por lo dems, est vaca
      const heading = document.createElement("h1");
      const headingText = document.createTextNode("Encabezado grande!");
      heading.appendChild(headingText);
      document.body.appendChild(heading);
    </script>
  </body>
</html>

Interfaces DOM

Estas son todas las interfaces que define la especificacin del DOM:

• AbortController
• AbortSignal
• AbstractRange
• Attr
• CDATASection
• CharacterData
• Comment
• CustomEvent
• Document
• DocumentFragment
• DocumentType
• DOMError
• DOMException
• DOMImplementation
• DOMParser
• DOMTokenList
• Element
• Event
• EventTarget
• HTMLCollection
• MutationObserver
• MutationRecord
• NamedNodeMap
• Node
• NodeIterator
• NodeList
• ProcessingInstruction
• QuotaExceededError
• Range
• ShadowRoot
• StaticRange
• Text
• TreeWalker
• XMLDocument
• XPathEvaluator
• XPathExpression
• XPathResult
• XSLTProcessor

Esta gua trata de los objetos y de las cosas concretas que puedes usar para manipular la jerarqua del DOM. Hay muchos puntos en los que entender cmo funcionan puede resultar confuso. Por ejemplo, el objeto que representa el elemento HTML form obtiene su propiedad name de la interfaz HTMLFormElement, pero su propiedad className de la interfaz HTMLElement. En ambos casos, la propiedad que buscas est en ese objeto form.

Sin embargo, la relacin entre los objetos y las interfaces que implementan en el DOM puede resultar confusa, por lo que esta seccin intenta explicar brevemente cules son las interfaces de la especificacin del DOM y cmo se ponen a disposicin.

Interfaces y objetos

Muchos objetos implementan varias interfaces distintas. El objeto table, por ejemplo, implementa una interfaz especializada, HTMLTableElement, que incluye mtodos como createCaption e insertRow. Pero, como tambin es un elemento HTML, table implementa la interfaz Element descrita en el captulo de referencia de Element del DOM. Y, por ltimo, dado que un elemento HTML es tambin, en lo que al DOM respecta, un nodo del rbol de nodos que forma el modelo de objetos de una pgina HTML o XML, el objeto table implementa asimismo la interfaz ms bsica Node, de la cual deriva Element.

Cuando obtienes una referencia a un objeto table, como en el siguiente ejemplo, usas habitualmente las tres interfaces de forma indistinta sobre el objeto, quiz sin darte cuenta.

const table = document.getElementById("table");
const tableAttrs = table.attributes; // interfaz Node/Element
for (const attr of tableAttrs) {
  // interfaz HTMLTableElement: atributo border
  if (attr.nodeName.toLowerCase() === "border") {
    table.border = "1";
  }
}
// interfaz HTMLTableElement: atributo summary
table.summary = "nota: borde aumentado";

Tipos de datos fundamentales

Esta pgina intenta describir los distintos objetos y tipos en trminos sencillos. Sin embargo, la API maneja varios tipos de datos que conviene conocer.

La siguiente tabla describe brevemente estos tipos de datos.

Tambin conviene tener en cuenta algunas cuestiones habituales de terminologa. Por ejemplo, es comn llamar attribute a cualquier nodo Attr y nodeList a un array de nodos del DOM. Estos y otros trminos se presentan y se usan a lo largo de toda la documentacin.

Los objetos document y window son aquellos cuyas interfaces se usan con ms frecuencia en la programacin con el DOM. En trminos sencillos, el objeto window representa algo parecido al navegador, y el objeto document es la raz del propio documento. Element hereda de la interfaz genrica Node, y entre las dos ofrecen muchos de los mtodos y propiedades que usas en cada elemento. Estos elementos tambin pueden tener interfaces especficas para manejar el tipo de datos que contienen, como en el ejemplo del objeto table de la seccin anterior.

Interfaces DOM obsoletas

El Modelo de Objetos del Documento se ha simplificado mucho. Para lograrlo, se han eliminado las siguientes interfaces de las distintas especificaciones DOM de nivel 3 o anteriores. Ya no estn disponibles para los desarrolladores web.

• DOMConfiguration
• DOMErrorHandler
• DOMImplementationList
• DOMImplementationRegistry
• DOMImplementationSource
• DOMLocator
• DOMObject
• DOMSettableTokenList
• DOMUserData
• ElementTraversal
• Entity
• EntityReference
• NameList
• Notation
• TypeInfo
• UserDataHandler

DOM HTML

Un documento que contiene HTML se describe mediante la interfaz Document, que la especificacin de HTML extiende para incluir varias caractersticas especficas de HTML. En particular, la interfaz Element se especializa en HTMLElement y en varias subclases, cada una de las cuales representa un elemento concreto (o una familia de elementos estrechamente relacionados).

La API DOM HTML da acceso a diversas caractersticas del navegador, como las pestaas y ventanas, los estilos y hojas de estilo CSS, el historial de navegacin, etc. Estas interfaces se tratan con ms detalle en la documentacin de la API DOM HTML.

DOM SVG

Del mismo modo, un documento que contiene SVG tambin se describe mediante la interfaz Document, que la especificacin de SVG extiende para incluir varias caractersticas especficas de SVG. En particular, la interfaz Element se especializa en SVGElement y en varias subclases, cada una de las cuales representa un elemento o una familia de elementos estrechamente relacionados. Estas interfaces se tratan con ms detalle en la documentacin de la API SVG.

Ejemplos

Establecer el contenido de texto

Este ejemplo usa un elemento <div> que contiene un <textarea> y dos elementos <button>. Cuando el usuario hace clic en el primer botn, se establece un texto en el <textarea>. Cuando el usuario hace clic en el segundo botn, se borra el texto. Usamos:

• Document.querySelector() para acceder al <textarea> y al botn.
• EventTarget.addEventListener() para detectar los clics de los botones.
• Node.textContent para establecer y borrar el texto.

HTML

<div class="container">
  <textarea class="story"></textarea>
  <button id="set-text" type="button">Establecer texto</button>
  <button id="clear-text" type="button">Borrar texto</button>
</div>

CSS

.container {
  display: flex;
  gap: 0.5rem;
  flex-direction: column;
}

button {
  width: 200px;
}

JavaScript

const story = document.querySelector(".story");

const setText = document.querySelector("#set-text");
setText.addEventListener("click", () => {
  story.textContent = "Era una noche oscura y tormentosa...";
});

const clearText = document.querySelector("#clear-text");
clearText.addEventListener("click", () => {
  story.textContent = "";
});

Resultado

Aadir un elemento hijo

Este ejemplo usa un elemento <div> que contiene otro <div> y dos elementos <button>. Cuando el usuario hace clic en el primer botn, se crea un elemento nuevo y se aade como hijo del <div>. Cuando el usuario hace clic en el segundo botn, se elimina el elemento hijo. Usamos:

• Document.querySelector() para acceder al <div> y a los botones.
• EventTarget.addEventListener() para detectar los clics de los botones.
• Document.createElement para crear el elemento.
• Node.appendChild() para aadir el hijo.
• Node.removeChild() para eliminar el hijo.

HTML

<div class="container">
  <div class="parent">padre</div>
  <button id="add-child" type="button">Aadir un hijo</button>
  <button id="remove-child" type="button">Eliminar el hijo</button>
</div>

CSS

.container {
  display: flex;
  gap: 0.5rem;
  flex-direction: column;
}

button {
  width: 100px;
}

div.parent {
  border: 1px solid black;
  padding: 5px;
  width: 100px;
  height: 100px;
}

div.child {
  border: 1px solid red;
  margin: 10px;
  padding: 5px;
  width: 80px;
  height: 60px;
  box-sizing: border-box;
}

JavaScript

const parent = document.querySelector(".parent");

const addChild = document.querySelector("#add-child");
addChild.addEventListener("click", () => {
  // Aade un elemento hijo solo si an no existe ninguno
  // adems del nodo de texto "padre"
  if (parent.childNodes.length > 1) {
    return;
  }
  const child = document.createElement("div");
  child.classList.add("child");
  child.textContent = "hijo";
  parent.appendChild(child);
});

const removeChild = document.querySelector("#remove-child");
removeChild.addEventListener("click", () => {
  const child = document.querySelector(".child");
  parent.removeChild(child);
});

Resultado

Lectura y modificacin del rbol

Supongamos que queremos cambiar el encabezado del documento de Qu es un rbol DOM? y escribir dos prrafos en lugar de uno. El siguiente script lo conseguira:

HTML

<html lang="es">
  <head>
    <title>Mi documento</title>
  </head>
  <body>
    <input type="button" value="Cambiar este documento." />
    <h2>Encabezado</h2>
    <p>Prrafo</p>
  </body>
</html>

JavaScript

document.querySelector("input").addEventListener("click", () => {
  // document.getElementsByTagName("h2") devuelve una NodeList con los elementos
  // <h2> del documento, y el primero es el nmero 0:
  const header = document.getElementsByTagName("h2").item(0);

  // El firstChild del encabezado es un nodo Text:
  header.firstChild.data = "Un documento dinmico";

  // Ahora header es "Un documento dinmico".

  // Accede al primer prrafo
  const para = document.getElementsByTagName("p").item(0);
  para.firstChild.data = "Este es el primer prrafo.";

  // Crea un nuevo nodo Text para el segundo prrafo
  const newText = document.createTextNode("Este es el segundo prrafo.");

  // Crea un nuevo Element que ser el segundo prrafo
  const newElement = document.createElement("p");

  // Coloca el texto en el prrafo
  newElement.appendChild(newText);

  // Coloca el prrafo al final del documento aadindolo al
  // body (que es el padre de para)
  para.parentNode.appendChild(newElement);
});

Crear un rbol

Tambin puedes crear el rbol de Qu es un rbol DOM? completamente en JavaScript.

const root = document.createElement("html");
root.lang = "es";

const head = document.createElement("head");
const title = document.createElement("title");
title.appendChild(document.createTextNode("Mi documento"));
head.appendChild(title);

const body = document.createElement("body");
const header = document.createElement("h1");
header.appendChild(document.createTextNode("Encabezado"));
const paragraph = document.createElement("p");
paragraph.appendChild(document.createTextNode("Prrafo"));
body.appendChild(header);
body.appendChild(paragraph);

root.appendChild(head);
root.appendChild(body);

Propagacin de eventos

Este ejemplo muestra, de forma muy sencilla, cmo se disparan y se manejan los eventos en el DOM. Cuando se carga el BODY de este documento HTML, se registra un detector de eventos en la fila superior de la TABLE. El detector de eventos procesa el evento ejecutando la funcin stopEvent, que cambia el valor de la celda inferior de la tabla.

Sin embargo, stopEvent tambin llama a un mtodo del objeto de evento, event.stopPropagation, que impide que el evento siga propagndose hacia arriba en el DOM. Ten en cuenta que la propia tabla tiene un manejador de eventos onclick que debera mostrar un mensaje cuando se hace clic en la tabla. Pero el mtodo stopEvent ha detenido la propagacin, as que, una vez actualizados los datos de la tabla, la fase del evento termina de hecho y se muestra un cuadro de alerta para confirmarlo.

<table id="t-daddy">
  <tbody>
    <tr id="tbl1">
      <td id="c1">uno</td>
    </tr>
    <tr>
      <td id="c2">dos</td>
    </tr>
  </tbody>
</table>

#t-daddy {
  border: 1px solid red;
}

#c1 {
  background-color: pink;
}

function stopEvent(event) {
  const c2 = document.getElementById("c2");
  c2.textContent = "hola";

  // esto debera impedir que t-daddy reciba el clic.
  event.stopPropagation();
  console.log("propagacin del evento detenida.");
}

const elem = document.getElementById("tbl1");
elem.addEventListener("click", stopEvent);

document.getElementById("t-daddy").addEventListener("click", () => {
  console.log("clic en t-daddy");
});

Mostrar las propiedades del objeto de evento

Este ejemplo usa mtodos del DOM para mostrar, en una tabla, todas las propiedades del objeto de evento click y sus valores. Tambin muestra una tcnica til: usar un bucle for...in para recorrer las propiedades de un objeto y obtener sus valores.

Las propiedades de los objetos de evento varan mucho de un navegador a otro. El WHATWG DOM Standard enumera las propiedades estndar, aunque muchos navegadores las han ampliado considerablemente.

Copia el siguiente cdigo en un archivo de texto en blanco y brelo en varios navegadores: te sorprender la diferencia en el nmero y los nombres de las propiedades. Tambin puedes aadir algunos elementos a la pgina y llamar a esta funcin desde distintos manejadores de eventos.

<h1>Propiedades del objeto de evento del DOM <span id="eventType"></span></h1>

table {
  border-collapse: collapse;
  margin-top: 2em;
}
thead {
  font-weight: bold;
}
td {
  padding: 2px 10px;
}

.odd {
  background-color: #efdfef;
}
.even {
  background-color: white;
}

function showEventProperties(event) {
  function addCell(row, text) {
    const cell = row.insertCell(-1);
    cell.appendChild(document.createTextNode(text));
  }

  document.getElementById("eventType").textContent = event.type;

  const table = document.createElement("table");
  const thead = table.createTHead();
  let row = thead.insertRow(-1);
  const labelList = ["#", "Propiedad", "Valor"];
  const len = labelList.length;

  for (let i = 0; i < len; i++) {
    addCell(row, labelList[i]);
  }

  const tbody = document.createElement("tbody");
  table.appendChild(tbody);

  for (const p in event) {
    row = tbody.insertRow(-1);
    row.className = row.rowIndex % 2 ? "odd" : "even";
    addCell(row, row.rowIndex);
    addCell(row, p);
    addCell(row, event[p]);
  }

  document.body.appendChild(table);
}

window.addEventListener("click", showEventProperties);

Especificaciones

Vase tambin

• Modelo de Objetos de CSS (CSSOM)
• API DOM HTML
• API SVG