El DOM o Document Object Model (Modelo de objeto de documento en español) es una interfaz de programación para los documentos web como HTML.
¿Una interfaz? ¿Qué clase de interfaz?
¿La interfaz de usuario?
No.
¿Una interfaz de audio?
Noooo tampoco.
¿La definición de un tipo de objeto en programación?
interface Person {
name: string;
age: number;
}
function greet(person: Person) {
return "Hello " + person.name;
}¡Correcto!
Pero si es una interfaz. Entonces eso no tiene sentido. Una interfaz es la definición de las propiedades que va a contener un objeto y ya. Falta la implementación ¿o no?
Aaah bueno. Para variar en software utilizamos la terminología a medias para que las cosas sean mas confusas cuando alguien esta aprendiendo. Lamentablemente esa definición escueta y sin profundidad de lo que es el DOM es la más común de encontrar.
Sin embargo en realidad es simple.
La interfaz del DOM
El W3C (World Wide Web Consortium) es el encargado de publicar actualizaciones de las especificaciones del DOM. Esta organización define la estandarización de la web y por lo tanto todas las implementaciones de interfaces en la web (como la del DOM) deben seguir sus especificaciones.
Ok ahora ya sabemos quien lo define. Pero eso nos lleva a la pregunta. ¿Quién lo implementa?
La respuesta es…
Nuestros amigos, los navegadores.
Así es los navegadores implementan las especificaciones de la W3C. Es gracias a que se sigue esta especificación que se mantiene un estándar sin importar que navegador utilices: Chrome, Edge, Firefox, etc. Lo cual evita que alguno se pase de listo y cambie los nombres de las funciones para interactuar con el DOM o el numéro de parámetros que se necesitan.
Documentos web: HTML
¿Qué eso de que la interfaz del DOM es para los documentos web como HTML?
Bueno para entender eso podemos utilizar otra famosa definición del DOM: (Si, hay mas de 2)
“El DOM es el arbol o jerarquía de objetos que tiene el navegador que representa cada elemento de la página.”
Ok esto nos acerca un poco mas a la idea de lo que puede ser. Veamos un ejemplo:
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div class="main-container">
<h1>Lorem Ipsum</h1>
</div>
<div class="paragraphs-container">
<p>Sed nec fermentum orci.</p>
</div>
</body>
</html>Cuando un navegador lee un archivo HTML lo usa para crear un árbol de objetos que representa precisamente cada elemento definido en el HTML.
En este caso el árbol del DOM se representaría de esta manera:
El Document (Documento) es el objeto inicial del árbol. Le sigue el root element (elemento raíz) de tu código. Este siempre será la etiqueta o tag de inicial.
A continuación esta la tag de <head> y <body> al mismo nivel. lo cual quiere decir que son hermanos. Estos es porque ambos estan declarados dentro del <html>.
En <body> pasa lo mismo de nuevo ya que pusimos 2 <div>. Cada uno con un hijo. <h1> y <p> respectivamente. Ambos de estos elementos a su vez tienen texto dentro de cada uno y eso se indica con un nodo de tipo Text.
En <head> solo hay un elemento hijo: <title>. En este tag no pusimos nada y por ende el nodo/hoja del árbol no se extiende más alla de el mismo.
Ok entonces eso es un ejemplo del DOM…¿y?
¿Para qué sirve que el navegador se tome la molestia de crear este objeto?
Ah la respuesta es muy simple.
El HTML que se le proporciona a un navegador proporciona la base para crear solo la PRIMERA VERSIÓN del DOM.
Ahí esta la pista.
¿Te imaginas la respuesta?
El DOM esta hecho para poder ser modificado. Es para que una página pueda tener comportamiento dinámico. Crear, actualizar o remover su contenido.
¿Recuerdas la existencia de la interfaz del DOM?
Eso es lo que nos ayuda a los desarrolladores a acceder a las funciones y propiedades que nos permiten manipularlo.
Por lo tanto te darás cuenta que el DOM no es cualquier cosa es lo que permite que las páginas web funcionen como lo hacen hoy en día.
Dicho todo esto. Al final lo que yo explico aquí es una introducción simple a lo que es el DOM. Pero para leer su documentación oficial solo tienes que ir aquí.