¿Qué es DOM? | Alura Cursos Online

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).

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.