¿Qué es exactamente el DOM?

por

¿Qué es el modelo de objetos de documento y por qué debería saber cómo usarlo?

El Modelo de Objetos del Documento, o el «DOM», es una interfaz para páginas web. Es esencialmente una API para la página, que permite a los programas leer y manipular el contenido, la estructura y los estilos de la página. Analicemos esto.

¿Cómo se construye una página web?

La forma en que un navegador pasa de un documento HTML de origen a mostrar una página con estilo e interactiva en la ventana gráfica se denomina «Ruta de representación crítica».Aunque este proceso se puede dividir en varios pasos, estos pasos se pueden agrupar en dos etapas.

La primera etapa implica que el navegador analice el documento para determinar qué se representará en última instancia en la página, y la segunda etapa implica que el navegador realice el procesamiento.

El resultado de la primera etapa es lo que se llama un «árbol de renderizado». El árbol de representación es una representación de los elementos HTML que se representarán en la página y sus estilos relacionados. Para construir este árbol, el navegador necesita dos cosas: El CSSOM, una representación de los estilos asociados con los elementos. El DOM, una representación de los elementos.

¿Cómo se crea el DOM (y cómo se ve)?

El DOM es una representación basada en objetos del documento HTML de origen. Tiene algunas diferencias, como veremos a continuación, pero es esencialmente un intento de convertir la estructura y el contenido del documento HTML en un modelo de objeto que puede ser utilizado por varios programas.

La estructura de objetos del DOM está representada por lo que se llama un «árbol de nodos». Se llama así porque se puede considerar como un árbol con un solo tallo padre que se ramifica en varias ramas secundarias, cada una de las cuales puede tener hojas. En este caso, el «tallo» padre es el elemento raíz , las «ramas» hijo son los elementos anidados, y las «hojas» son el contenido dentro de los elementos.

<!doctype html>
<html lang="en">
 <head>
   <title>Mi primera pagina web</title>
  </head>
 <body>
    <h1>Hola mundo!</h1>
    <p>¿Cómo estás?</p>
  </body>
</html>

Este documento puede se representado por el siguiente arbol de nodos:

  • html
    • head
      • title
        • Mi primera página web
    • body
      • h1
        • Hola mundo
      • pag
        • ¿Cómo estás?

El DOM no es tu fuente HTML

Aunque el DOM se crea a partir del documento HTML de origen, no siempre es exactamente el mismo. Hay dos instancias en las que el DOM puede ser diferente del HTML de origen.

1. Cuando el HTML no es válido El DOM es una interfaz para documentos HTML válidos . Durante el proceso de creación del DOM, el navegador puede corregir algunas invalidaciones en el código HTML.

2. Cuando el DOM es modificado por Javascript Además de ser una interfaz para ver el contenido de un documento HTML, el DOM también se puede modificar, convirtiéndolo en un recurso vivo.

El DOM no es lo que ves en el navegador (es decir, el árbol de renderizado)

Lo que ves en la ventana del navegador es el árbol de renderizado que, como mencioné, es una combinación del DOM y el CSSOM. Lo que realmente separa el DOM del árbol de renderizado es que este último solo consiste en lo que eventualmente se pintará en la pantalla. Debido a que el árbol de renderizado solo se preocupa por lo que se renderiza, excluye elementos que están ocultos visualmente.

El DOM no es lo que hay en DevTools

Esta diferencia es un poco más minúscula porque el inspector de elementos DevTools proporciona la aproximación más cercana al DOM que tenemos en el navegador. Sin embargo, el inspector de DevTools incluye información adicional que no está en el DOM. El mejor ejemplo de esto son los pseudoelementos CSS. Los pseudo-elementos creados usando los selectores ::beforey ::afterforman parte del árbol de renderizado y CSSOM, pero técnicamente no son parte del DOM. Esto se debe a que el DOM se crea solo a partir del documento HTML de origen, sin incluir los estilos aplicados al elemento. Esta es la razón por la cual Javascript no puede apuntar a los pseudo-elementos, ya que no son parte del DOM.

Leer también:Evite un tamaño de DOM excesivo; ¿Qué es DOM en Javascript?

This post is also available in: Español