El DOM es un acrónimo del término Document Object Model. Su trabajo es describir la estructura de un documento HTML y las relaciones entre los diferentes elementos como etiquetas, atributos, y textos de la página. Al agregar, eliminar o modificar elementos existentes en tu sitio web, estás creando estructuras que el navegador interpreta como el DOM. Entonces, si agrego una nueva etiqueta <li> dentro de una etiqueta <ul> en mi página HTML, estoy añadiendo un nodo al DOM. Este nodo al ser agregado al DOM tiene diferentes relaciones, como hermanos y padres. Por ejemplo, los demás elementos <li> son hermanos del nuevo <li> que he agregado y la etiqueta <ul> es padre del nuevo <li>.

El DOM es un API

El DOM es también una API que permite a lenguajes como Javascript y CSS definir y modificar documentos. Tomemos por ejemplo el caso de CSS. Cuando escribimos un selector en dicho lenguaje, lo que hace el navegador es hacer una comparación entre dicho selector y el DOM y para ello construye el árbol DOM.
Una vez que la estructura existe, mapea el CSS que escribimos y lo vincula a un elemento específico dentro del árbol. Es recomendable pensar en el árbol del DOM como un árbol genealógico. En una página HTML simple en la parte más alta el árbol se encuentra la etiqueta el documento mismo, luego la etiqueta <html>que normalmente llamamos root. Dentro tenemos dos hijos, que normalmente son la etiqueta <head> y la etiqueta <body>, dentro de cada uno de ellos tenemos otros elementos.

El DOM es un árbol

Por ejemplo, dentro de la etiqueta <head> tenemos un elemento <title>, un elemento <script> o un elemento <link>. Dentro de la etiqueta <body>  podemos tener un <header>, el cual a su vez puede tener dentro un elemento <nav>. Dentro del elemento <nav> podemos tener listas <ul> o <ol>. De la misma manera, podemos tener etiquetas <article>, <h1> y <p>. Todo elemento en el DOM es considerado un nodo. Los nodos pueden ser padres y tener sus elementos hijos, y también pueden tener relaciones entre ellos. Elementos en el mismo nivel son considerados hermanos. En otras palabras, hermanos son elementos con el mismo padre. El primer y último hijo de un elemento tienen nombres especiales, llamados “first child” y “last child” respectivamente. El resto de los nodos son conocidos como nodos hijos. Recuerda que los navegadores usan el HTML para crear la estructura DOM. Es por eso que es importante escribir código HTML claro y válido, para que tanto código CSS como JavaScript pueda acceder y modificar elementos sin tener problemas.