Artículos de Tecnología > Front End

¿Qué es DOM?

Ellen Pimentel
Ellen Pimentel

DOM (5)

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.

console dir

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:

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!"

hola

¿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

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.

Artículos de Tecnología > Front End

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

  • 137 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 para resolver tus dudas
  • Acceso completo a la plataforma por 3 meses
  • Descuento de lanzamiento de 30%

Trimestral

Descuento de lanzamiento de 30%
  • 137 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 para resolver tus dudas
  • Acceso completo a la plataforma por 3 meses
US$19,90
un pago de US$29,90 US$19,90
¡Quiero empezar a estudiar!

Paga en moneda local en los siguientes países

Semestral

Descuento de lanzamiento de 30%
  • 137 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 para resolver tus dudas
  • Acceso completo a la plataforma por 6 meses
US$33,90
un pago de US$49,90 US$33,90
¡Quiero empezar a estudiar!

Paga en moneda local en los siguientes países

Acceso a todos los cursos
Estudia las 24 horas, dónde y cuándo quieras
Nuevos cursos cada semana