DOM: intoducción

Aprovechando que todavía falta algunos días para que sea martes, el día que he escogido para liberar los artículos sobre ajax, y que nada me impide publicar algo que no sea ajax durante los demás días, me voy a tomar el tiempo para dar una breve introducción al DOM.

El DOM, o Document Object Model, no es más que una interfaz independiente o neutral al lenguaje y la plataforma que nos da la oportunidad de acceder y modificar documentos, específicamente aquellos que han sido tratados con algún lenguaje de enmarcado como lo es (X)HTML.

Este famoso DOM nos permite acceder de forma estructural el contenido de nuestros documentos de forma dinámica. Algunos tienen la idea que el DOM es exclusivo de HTML o de Javascript. La verdad no podría ser más diferente. El DOM no es exclusivo de HTML y mucho menos de Javascript. Si bien es cierto que por un lado los documentos HTML, todos, contienen un DOM, por el otro lado, los documentos Javascript no. De hecho, la única relación entre Javascript y el DOM es la que se mantiene mediante la API de DOM de Javascript. Esta API nos permite el acceso al DOM y se conforma de métodos como getElementById() y getElementsByTagName().

Es el DOM un leguaje de programación?
No. El DOM es simplemente un modelo, un maqueta de la estructura de nuestro documento; de ahí su nombre. El DOM se representa generalmente como un árbol genealógico, con el elemento HTML a la cabeza, ya que este elemento es el antecesor de todos. No hay otro elemento más arriba de HTML (esto hablando aquí exclusivamente de documentos HTML). Analicemos un ejemplo:


<html>
   <head>
      <!-- Contenido de head -->
   </head>
   <body>
      <!-- Contenido de body -->
   </body>
</html>

Como puedes ver en ese código, el elemento html es que contiene a todos los demás (head y body junto con sus elemento internos no mostrados aquí). A cada uno de estos elementos dentro del DOM se les conoce como nodos. Todos los nodos, excepto por html, son hijos de otro nodo. En nuestro ejemplo, los nodos head y bodoy son hijos de html.

Interactuando con el DOM.
Dependiendo del lenguaje que escojas, la forma de interactuar con el DOM puede variar. Nosotros escogeremos Javascript, ya que este blog es principalmente sobre Javascript. Como ya mencioné anteriormente, Javascript nos ofrece una API (Application Programing Interface) para el uso del DOM. Una API no es más que una serie de métodos que se hacen disponibles para poder interactuar con una aplicación. De hecho, dependiendo de con quien hables, puede ser que algunos no consideren lo métodos que ofrece Javascript para interactuar con el DOM como una API ya que el DOM no es una aplicación, sino una representación del documento. Sin embargo, yo, por comodidad, he decidido llamar a este conjunto de funciones API.

Esta API se conforma de métodos como los ya mencionados getElementById() y getElementsByTagName(). Curiosamente javascript no contiene un método getElementsByClassName(), lo cual es curioso considerando que las clases son una buena forma de agrupar elementos que en determinado momento nos gustaría poder manejar todos de una sola vez. Sin embargo, Javascript si nos ofrece otra serie de métodos como appendChild() y removeChild() que sirven para agregar y remover nodos respectivamente. No voy a entrar en detalles ni a listar todos los métodos para el manejo de DOM ofrecidos por Javascript ya que solo pretendo dar una breve introducción al DOM y no al API de Javascript para el uso del DOM. En su momento ya habrá tiempo para tratar ese tema.

Los tipos de Nodos
Ya mencioné que cada elemento en HTML es representado por un nodo en el DOM. Veamos ahora los distintos tipos de nodos que hay. Específicamente tenemos:
El nodo document que es la representación de todo el documento.
Nodos de elemento, que representan un elemento como puede ser <p></p>
Nodos de texto, que representan texto como puede ser “mi texto”
Nodos de atributo, que representan un atributo como title=”hola mundo”
Nodos de comentario, que representan un comentario <!– comentario –>

Es necesario entender los diferentes tipos de nodo ya que cada uno tiene sus peculiaridades. Algo en lo que muchos novatos caen, es pensar en elementos como entidades globales, es decir que en:

<p>Mi parrafo</p>

Muchos ven a “Mi parrafo” como el valor de <p></p>. La verdad no puede estar más lejos. “Mi parrafo” no es el valor de <p></p>, más bien es un nodo completamente distinto y hasta cierto punto “independiente”. En un articulo futuro estaré hablando más sobre el DOM y explicando con código estas leves confusiones. Como dije hace un momento, mi único objetivo por ahora es poder explicar lo que el DOM es.

Por último, voy a decir que el DOM es una de las mejores cosas que le pudo pasar al mundo de la web. A través de DOM es posible modificar dinámicamente y en tiempo real muchos aspectos de una página web. En un futuro me gustaría hablar sobre DOM scripting y sobre uso responsable, amigable y degradable del DOM, pero por ahora esto es el fin de esta breve introducción.

4 thoughts on “DOM: intoducción

  1. Que buen Articulo, por fin entendi lo que es el DOM ahora voy a seguir leyendo mas articulos para ampliar conocimientos en el tema, de todas formas muchas gracias Buzu si no fuera por este articulo. Estaria aun mas perdido q la mama de Marco😄, bueno sobre todo estos apuntes.

    Una duda que tengo es en el tipo de descencia de los elementos en html deberia empezar con el h1 luego h2 h3 o podria usar un ul al comienzo o comenzando el documento cno un h4 y al final un h1 aunque esto ya creo que no es una practica recomendada lo que se que el dom no solo es el elemento html si no sus nodos y sub-nodos texto elemento el nodo document principal y mas cositas🙂

    Gracias de nuevo espero tener mas noticias tuyas, bendiciones un Saludo.

    • Por semántica, el primero titulo de tu sitio sería un h1, el subtitulo inmediatamente después en la jerarquía de importancia sería un h2 y así sucesivamente. En cuanto al DOM, realmente no afecta por que el DOM no se construye conforme a la jerarquía de los elementos, sino conforme a la estructura del documento.

    • Que tal? Si necesitas ayuda, puedes ponerte en contacto a través del formulario que está en la página a la que enlasas en el comentario. No olvides detallar el tipo de ayuda que necesitas.

      Saludos.

Comments are closed.