¿Qué es DOM?

La traducción del acrónimo inglés DOM (Document Object Model) significa Modelo de Documento de Objeto; se trata de modelar todo el HTML.

A partir de su quinta versión, el HTML todavía estático, además de mejoras en la estructura y separación de la semántica de la estilización, ganó interactividad con la creación del lenguaje de programación JavaScript, y fue en este momento que apareció el DOM.

Una de las mejores formas de entender un concepto, y es algo recurrente en el universo de la tecnología, es hacer abstracciones y analogías.

Estructura

El DOM es como un árbol genealógico, pero en forma invertida. El elemento que precede al document es el window, que no es más que la ventana del navegador. En su estructura, document se encuentra en la parte superior como un objeto global y su elemento raíz es la etiqueta html y todos los demás descienden de él a través de sus ramas (branches).

alt tex: Diagrama DOM. En el eje vertical y en la primera línea, tienes el objeto document. A partir de ahí, se abren dos ramas: una para el objeto head y otra para el objeto body. A la izquierda, el objeto head se bifurca al objeto title y el objeto title se bifurca a su valor, con el texto en inglés My title. Volviendo al objeto html, abajo y a la derecha, está el objeto body, que se extiende a los objetos a y h1. En el objeto a, bifurcándose hacia abajo y al lado izquierdo, bifurca hacia su izquierda el atributo href y hacia abajo el valor en inglés My link. Volviendo a la etiqueta body, debajo y al lado derecho está la etiqueta h1, y se ramifica hacia abajo con el valor, el texto en inglés, My header.

Fuente: Representación adaptada de W3Schools

La etiqueta html, objeto padre, tiene dos objetos hijos: el head y el body (la cabeza y el cuerpo). Los objetos que siguen a las ramas inferiores se denominan child, y los de arriba, parent. La etiqueta head es parent de la etiqueta title, y el body es parent de las etiquetas a y h1, y así sucesivamente, según la jerarquía. A partir de las etiquetas, derivan los atributos, y de estos, sus valores.

En código, se traduciría así:

<!DOCTYPE html>
<html>
<head>
    <title>My title</title>
</head>
<body>
    <a href="My link"></a>
    <h1>My header</h1>
</body>
</html>

¿Dónde se inserta?

Y la pregunta que surge es: ¿pero el DOM es parte de HTML o de JavaScript? De hecho, de ninguno — él es generado por el browser. Al cargar la página, el navegador crea el documento, la interfaz, y Javascript usa el DOM para conectarse al HTML.

Para comunicarse entre ellos, es necesario insertar la etiqueta script en el archivo HTML, y como buena práctica, debe ser antes del cierre de la etiqueta body para que los scripts se carguen después del código base.

Puedes hacerlo de dos maneras: escribiendo el código JavaScript dentro de la propia etiqueta script, o insertando la ruta relativa del archivo externo. También como buena práctica, la segunda opción es la más recomendada para la separación de responsabilidades y un mejor mantenimiento del código.

<script>
    alert("¡Hola, Mundo!")
</script>

<script src="script.js"></script>

Maneras de manejarlo

En el DevTools del navegador, en la pestaña Console, al escribir console.dir (directorio) y pasar el parámetro document, se muestra una lista de propiedades y funcionalidades del documento.

Hay varias formas de navegar dentro del DOM, en JavaScript usamos el objeto document y a través del punto accedemos a las propiedades y métodos, siendo posible seleccionar, cambiar, borrar y crear elementos a los componentes del sitio web, según la estandarización creada por W3Schools. Para realizar estas acciones disponemos de algunos métodos, tales como:

document.getElementById();
document.getElementsByClass();
document.getElementsByTagName();
document.querySelector();
document.querySelectorAll();
document.createElement();
element.addEventListener();

Con document.querySelector, por ejemplo, entre las opciones que ofrece, podemos cambiar el texto en el documento HTML:

<body>
    <h1> ¡Hola! </h1>
    <script src="script.js"></script>
</body>

document.querySelector("h1").innerText = "¡Hola, Mundo!"

¿Recuerdas que la ventana del navegador está representada por el objeto window? Usando otros ejemplos, cuando escribimos la función alert o el método write, es como si lo escribiéramos así:

<script>
    window.alert("¡Hola, Mundo!");
    window.document.write("¡Hola, Mundo!");
</script>

El window se puede omitir, no se requiere en JS, así como con el punto y coma (;) al final de un comando.

<script>
    alert("¡Hola, Mundo!")
    document.write("¡Hola, Mundo!")
</script>

Conclusión

El DOM es un conjunto de objetos y su estructura de datos se representa a través de un diagrama, o en sentido figurado, un árbol de objetos.

Cuando se trata de desarrollo web básico, tenemos el trío inseparable: HTML, CSS y JavaScript, cada uno con su propio rol. Conocer las bases de la programación y lo que ellos representan es fundamental para poder avanzar con frameworks y librerías como Angular, Vue.js y React.

La tecnología es un área dinámica, y como en muchos aspectos de nuestra vida, no es necesario tener un don para lograr algo — sino, estudio continuo y mucha práctica. Si quieres profundizar y hacer carrera en el mundo del código, Alura Latam ofrece varias formaciones, incluyendo Principiante de Programación y Front-End con los siguientes cursos:

Ellen Pimentel ¡Hola, soy Ellen! Formo parte del equipo de Instructores Front-End de Alura Latam, y creo que la mejor manera de aprender es compartiendo conocimientos.

En Alura encontrarás variados cursos sobre Front End. ¡Comienza ahora!

Precios en:

USD

270 cursos
Cursos de Programación, Front End, Data Science, Innovación y Gestión.
Videos y actividades 100% en Español
Certificado de participación
Estudia las 24 horas, los 7 días de la semana
Foro y comunidad exclusiva para resolver tus dudas
Luri, la inteligencia artificial de Alura
Luri es nuestra inteligencia artificial que resuelve dudas, da ejemplos prácticos y ayuda a profundizar aún más durante las clases. Puedes conversar con Luri hasta 100 mensajes por semana
Acceso a todo el contenido de la plataforma por 6 meses

US$ 65.90

un solo pago de US$ 65.90

¡QUIERO EMPEZAR A ESTUDIAR!

270 cursos
Cursos de Programación, Front End, Data Science, Innovación y Gestión.
Videos y actividades 100% en Español
Certificado de participación
Estudia las 24 horas, los 7 días de la semana
Foro y comunidad exclusiva para resolver tus dudas
Luri, la inteligencia artificial de Alura
Luri es nuestra inteligencia artificial que resuelve dudas, da ejemplos prácticos y ayuda a profundizar aún más durante las clases. Puedes conversar con Luri hasta 100 mensajes por semana
Acceso a todo el contenido de la plataforma por 12 meses

US$ 99.90

un solo pago de US$ 99.90

¡QUIERO EMPEZAR A ESTUDIAR!

País
Plan Semestral	486.67 BOB	66873.64 CLP	274046.11 COP	65.90 USD	257.82 PEN	1209.26 MXN	2683.09 UYU
Plan Anual	737.76 BOB	101375.98 CLP	415435.60 COP	99.90 USD	390.83 PEN	1833.16 MXN	4067.38 UYU