Un lector escribió recientemente preguntándome qué era el DOM. Dijeron que lo habían escuchado mencionar y aludido, pero no están seguros de que realmente lo entiendan.
Podemos arreglarlo.
Pero el navegador analiza el HTML que escribe y lo convierte en DOM.
Ver código fuente solo le muestra el HTML que compone esa página. Probablemente sea el HTML exacto que escribiste.
Puede parecer un código diferente si, por ejemplo, trabaja en archivos de plantilla en un lenguaje de backend y no mira la salida HTML compilada con mucha frecuencia. O hay un “proceso de compilación” que ocurre después de escribir su HTML y el código se publica en el sitio web en vivo. Quizás ese HTML esté comprimido o cambiado.
Ver código fuente es un poco extraño en realidad. Las únicas personas a las que les importaría mirar ese código son los desarrolladores y todos los principales navegadores han incorporado herramientas de desarrollo ahora. Probablemente haya sobrevivido a su utilidad.
Cuando miras el panel en cualquier DevTools que estés usando que te muestre cosas que se parecen a HTML, ¡esa es una representación visual del DOM! ¡Lo hicimos!
Bueno, sí, lo hace. Fue creado directamente a partir de su HTML recordar. En la mayoría de los casos simples, la representación visual del DOM será como su HTML simple.
Pero a menudo no es lo mismo …
¿Cuándo es el DOM diferente al HTML?
Aquí hay una posibilidad: hay errores en su HTML y el navegador los ha corregido por usted. Digamos que tienes un <table> elemento en su HTML y omita los requisitos <tbody> elemento. El navegador simplemente insertará eso <tbody> para ti. Estará allí en el DOM, por lo que podrá encontrarlo con JavaScript y diseñarlo con CSS, aunque no esté en su HTML.
Sin embargo, el caso más probable es …
JavaScript puede manipular el DOM
Imagina que tienes un elemento vacío como este en tu HTML:
<div id="container"></div>Luego, más adelante en su HTML, hay un poco de JavaScript:
<script>
var container = document.getElementById("container");
container.innerHTML = "New Content!";
</script>Incluso si no conoce JavaScript, puede razonar ese fragmento de código. ¡En la pantalla verá Contenido nuevo! mas que nada, porque ese vacio div estaba lleno de, ejem, contenido nuevo.
Si usa DevTools para verificar la representación visual del DOM, verá:
<div id="container">New Content!</div>Que es diferente a su HTML original o lo que vería en Ver código fuente.
Ajax y plantillas
No vayamos al extremo profundo aquí, pero apuesto a que puede imaginarse que si usara Ajax para enganchar contenido de otro lugar y colocarlo en la página, el DOM será muy diferente a su HTML original. Lo mismo ocurre con la carga de datos de algún tipo y el uso de plantillas del lado del cliente.
Intente ir a Gmail y ver la fuente. Es solo un montón de scripts y datos de la carga de la página original. Apenas reconocible en comparación con lo que ves en la pantalla.
JavaScript frente al DOM
JavaScript es un idioma que el navegador lee y utiliza. Pero el DOM es donde suceden esas cosas. De hecho, mucho de lo que podría considerar como una “cosa de JavaScript” es más exactamente una “API DOM”.
Por ejemplo, podemos escribir JavaScript que busque un mouseenter evento en un elemento. Pero ese “elemento” es realmente un nodo DOM. Adjuntamos ese oyente a través de una propiedad DOM en ese nodo DOM. Cuando ocurre ese evento, es el nodo DOM el que emite ese evento.
Disculpas si he redactado alguna de esas cosas incorrectamente. Pero entiendes lo que espero. El DOM es el elemento vital aquí. Es donde todo va hacia abajo en el navegador. JavaScript es solo la sintaxis, el lenguaje. Se puede usar totalmente fuera del navegador sin ninguna API DOM (consulte Node.js).
Este artículo no es lo suficientemente nerd y profundo para mí.
Bueno, DOM son las siglas de “Document Object Model”, bla, bla, bla. No quería (y no estoy calificado) para escribir ese artículo. Aquí hay algunos carnosos:
- W3C: ¿Qué es el modelo de objetos de documento?
- MDN: Introducción – Modelo de objetos de documento
- Wikipedia: Modelo de objetos de documento