El Document object model (DOM) de Javascript

El DOM es un tipo especial de objeto que esquematiza las relaciones y interacciones entre los nodos de un documento web y que es creado por el navegador cada vez que interpreta una página web.

Cada etiqueta de un documento web es un nodo del mismo y puede ser interpretada a su vez como un objeto con propiedades definidas por los atributos, eventos y contenido de cada etiqueta.

En el modelo de objetos de un documento todos los nodos están relacionados entre si mediante jerarquías.

Mediante el DOM podemos acceder, modificar, crear, añadir o eliminar cualquier objeto ya sea el propio documento, etiquetas, atributos, eventos o estilos de cualquier etiqueta html, el css o incluso el propio javascript.

Lo resumimos como una combinación de uno de cada una de las 3 columnas a continuación:

Todos los navegadores incorporan un kit de herramientas para desarrolladores desde dónde inspeccionar el código y entre muchos otros usar visualizar el DOM.

En la imagen de pantalla podemos ver un pequeño ejercicio de clase visto desde las herramientas para desarrolladores de un navegador Chrome.

En la imagen aparece una línea señalada y en el extremo inferior el camino «html > head > title» hasta llegar al elemento title y su contenido

En esta entrada hemos resumido el concepto del DOM.

En futuras publicaciones hablaremos sobre como acceder al DOM y como modificar, crear y eliminar nodos.