El DOM de HTML

Ya hemos hablado de la estructura jerárquica de los Lenguajes de Marcas en general y de HTML en particular.

En el caso concreto de HTML esta estructura jerárquica se denomina DOM (Document Object Model). En inglés se suele conocer como DOM Tree (árbol DOM).

Así, por ejemplo, el siguiente DOM:

Figure 1: Imagen obtenida en la web https://www.w3schools.com/js/js_htmldom.asp

Representa la página web HTML siguiente:

<!DOCTYPE html>
<html>
  <head>
    <title>My title</title>
  </head>
  <body>
    <h1>My header</h1>
    <a href=""></a>
  </body>
</html>

Que podemos describir tal que así:

Nodo	Descripción
Document	Representa al documento en su totalidad, que lo contiene todo
<html>	Nodo de tipo elemento
<head>	Nodo de tipo elemento
<title>	Nodo de tipo elemento
My title	Nodo de tipo texto
<body>	Nodo de tipo elemento
<a>	Nodo de tipo elemento
href	Nodo de tipo atributo
<h1>	Nodo de tipo elemento
My header	Nodo de tipo texto

Por último, este DOM puede ser modificado de forma dinámica utilizando como tecnología JavaScript. Entraremos de lleno en esta parte en otro tema.