¿Qué es exactamente el DOM ? (Document Object Model)
El Dom es esencialmente una API para nuestras páginas web, que nos permite leer y manipular el contenido de la página, estructura y estilos.
Para comprender de manera más amplia el DOM, necesitamos tener claro un par de breves conceptos sobre cómo el navegador representa en nuestra pantalla un documento HTML.
¿Cómo es creada una página web?
La forma en que un navegador pasa de coger un documento HTML a mostrar una página interactiva y estilizada en nuestra pantalla, se llama "Critical Rendering Path" o Ruta de Renderización Crítica.
Para propósitos de este artículo podemos decir que dicha ruta se resume en dos etapas:
- En la primera etapa el navegador analiza el documento HTML y decide qué se renderizará/representará finalmente en la página y qué no.
- En la segunda etapa el navegador realiza la renderización.
El resultado de la primera etapa es llamado de 'Render Tree' o 'Árbol de Renderizado'.
Éste,es una representación de los elementos HTML que serán renderizados en la página web y sus respectivos estilos. Para construir esta representación, el navegador necesita:
- El DOM(Document Object Model) ,que es una representación de los elementos HTML,comentarios y texto.
- El CSSOM (CSS Object Model), que es una representación de los estilos asociados a los elementos.
Quédate con este concepto de 'Árbol de Renderizado'
¿Qué diablos es el DOM y cómo es creado?
El DOM es una representación del documento HTML basada en objetos. Es esencialmente una conversión de la estructura y del contenido del documento HTML a un modelo jerárquico de objetos que puede se usado por varios lenguajes de programación.
Esta estructura de objetos es representada por lo que llamamos 'node tree' o 'árbol de nodos'
Es llamada así porque puede verse como un árbol con un tallo principal, el cual tiene varias ramas secundarias, cada una de las cuales puede tener hojas.
En este caso, el tallo principal es el elemento <html>,las ramas son los elementos anidados, y las hojas el contenido de los elementos.
Un ejemplo de documento HTML:
<!doctype html>
<html lang="es">
<head>
<title>Mi página web</title>
</head>
<body>
<h1>Hola mundo!</h1>
<p>¿Cómo estás?</p>
</body>
</html>
Este documento puede formar la siguiente estructura:
Apesar de parecer que el DOM es un mapeo 1 a 1 del documento HTML, hay algunas diferencias que debemos considerar para entenderlo mejor.
El DOM no es el código fuente HTML
Aunque el DOM es creado apartir del código fuente HTML, no son siempre lo mismo. Hay dos casos en los que DOM puede ser diferente del código HTML:
1. Cuando el código HTML no es válido
El documento HTML debe ser válido. Durante el proceso de crear el DOM, el navegador puede corregir algunos fallos del código HTML.
Si miramos este código
<html>
Hola,mundo!
</html>
Nos damos cuenta de que le faltan los elementos y , lo que es un requisito para un HTML válido. Sin embargo, si miramos al árbol DOM, veremos que ha sido corregido
2. Cuando el DOM es modificado por JavaScript
Aparte de ser una interfaz para ver el contenido de un documento HTML,el DOM puede ser modificado, lo que le hace un recurso dinámico.
Podemos crear nodos adicionales en la estructura DOM usando JavaScript
//Crea un nuevo elemento <p>
let nuevoParrafo = document.createElement("p");
// Crea un nuevo nodo de texto
let contenidoParrafo = document.createTextNode("Soy un nuevo parrafo!");
// Agrega el contenido de texto al nuevo parrafo
nuevoParrafo.appendChild(contenidoParrafo);
/* Agrega el nuevo parrafo con el contenido
de texto al cuerpo del documento HTML*/
document.body.appendChild(nuevoParrafo);
Esto actualizará el DOM, pero no el documento HTML.
El DOM no es lo que vemos en el navegador
Lo que vemos en el navegador es el árbol de renderizado, que es una combinación del DOM y del CSSOM. Lo que realmente separa el DOM del árbol de renderizado, es que éste último consiste solamente de lo que será imprimido en pantalla.
El árbol de renderizado sólo se preocupa con lo que será renderizado, por lo que excluye elementos que están visualmente escondidos. Por ejemplo, elementos que tienen el estilo display:none.
<!doctype html>
<html lang="es">
<head></head>
<body>
<h1>Hola,mundo!</h1>
<p style="display: none;">¿Como estás?</p>
</body>
</html>
El DOM incluiría el elemento
:
Sin embargo, el árbol de renderizado ( lo que se ve en el navegador) no incluirá ese elemento:
El DOM no es lo que vemos en las DevTools
La inspector de elementos nos devuelve lo más cercano al DOM que se puede mostrar en el navegador. Sin embargo el inspector incluye información adicional que no está en el DOM.
El mejor ejemplo de esto son los pseudo-elementos de CSS que son creados usando los selectores ::before y ::after. Estos no son parte del DOM. Esto es porque el DOM es creado apartir del código HTML solamente, y no de los estilos.
Y aunque los pseudo-elementos no son parte del DOM, estos aparecen en nuestro inspector de elementos.
Es por eso por lo que JavaScript no puede apuntar a los pseudo-elementos, porque no son parte del DOM.