1 - DOM (Modelo de Objetos del Documento)

El lenguaje JavaScript fue creado para permitir interacturar con una página web. Luego ha migrado a otras plataformas como los servidores web, aplicaciones móviles y hasta el telescopio James Webb requiere script en este lenguaje.

Una vez que hemos aprendido a programar con el lenguaje JavaScript y si nuestro objetivo es el desarrollo de aplicaciones web frontend el paso natural es aprender a interacturar con todos los objetos que proporciona un navegador para crear y manipular una página HTML.

Entiendo que uno puede tener un poco de ansiedad y queres pasar directamente a trabajar con frameworks como Angular, Vue o una librería como React, mi recomendación es trabajar directamente con los objetos que provee el navegador para manipularlos directamente con nuestros algoritmos, luego podremos imaginar como funcionan los mismos en sus entrañas. Además en proyectos personales pequeños podemos sacar ventajas sin tener que utilizar las pesadas capas de los frameworks.

DOM

Un navegador web además del intérprete de JavaScript, tiene la siguientes herramientas disponibles para que un programador manipule la página y acceda a recursos del navegador:

Del objeto global window dependen los objetos que ya conocemos de JavaScript como son Array, Object, fetch etc. Ahora veremos que hay otro objeto llamado document que nos permite manipular todas las etiquetas de la página web (crearlas, modificarlas y borrarlas si es necesario)

Como vemos el objeto 'document' es parte del DOM (Document Object Model) es el punto de entrada a la página. Con él podemos cambiar o crear cualquier cosa en la página.

Estructura de una página web

La estructura de un documento HTML son las etiquetas. Según la especificación del estándar del DOM cada etiqueta es un objeto.

Las etiquetas anidadas son llamadas etiquetas "hijas" de la etiqueta que las contiene. El texto dentro de una etiqueta también es un objeto.

Luego todos los objetos (etiquetas) son accesibles desde JavaScript mediante el objeto document.

Herramenta interactiva

Este sitio tiene por objetivo que aprenda a manipular el DOM con pequeños ejercicios ya resueltos y otros propuestos. Del lado izquierdo puede codificar el algoritmo y ver los resultados en la página como se ve en el navegador. Además mostramos el código fuente de la página que manipularemos y una vista de árbol para entender como navegamos entre los distintos objetos.

Problemas resueltos

Vamos a cambiar el color de fondo de la página por el color amarillo, accediendo a la propiedad style de la etiqueta body.

Se tiene la siguiente página (puede ver el mismo código en la parte inferior, como lo interpreta el navegador en la parte de abajo a la izquierda y su árbol de objetos a la derecha):

<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8" />
    <title>Prueba</title>
  </head>

  <body>
    <h1>Lenguaje Python</h1>
    <p>Python fue creado a finales de los años ochenta.</p>
    <p>El creador de Python es Guido van Rossum.</p>
  </body>

</html>

Lo primero que hay que entender es que el navegador organiza una página web como un árbol de etiquetas HTML. Podemos verla en la parte inferior y comprobar que la etiqueta raiz es 'html'. Luego vemos que tiene dos hijos que son 'head' y 'body'.

La etiqueta 'head' tiene 2 hijos que son 'title' y 'meta'. A su vez la etiqueta 'title' tiene un objeto hijo de tipo texto y la etiqueta 'meta' no tiene hijos.

Por otro lado la etiqueta u objeto 'body' tiene 3 hijos que son dos de tipo 'p' y uno de tipo 'h1'. A su vez cada uno de estos 3 objetos tienen un hijo de tipo texto.

Debe quedar perfectamente claro que la página tiene 12 objetos estructurados como un árbol (vamos a dejar de lado al objeto <!DOCTYPE html> que normalmente no se lo manipula)

El objeto 'document' tiene una referencia directa al objeto o etiqueta 'body' de la página web. Luego podemos cambiar el color de fondo del cuerpo de la página manipulando el DOM con la siguiente sintaxis:

document.body.style.backgroundColor='yellow'

Puede sacar los caracteres de comentario en la ventana izquierda y comprobar que el fondo de la página se cambia a color amarillo. Tener en cuenta que el objeto body cuenta con la propiedad style y mediante esta podemos acceder a un conjunto de propiedades del estilo que se aplica a la etiqueta.

Modifique la propiedad color del estilo del body que luego afecta a todas las etiquetas del árbol, esto hace que el título y los dos párrafos cambien al color especificado:

document.body.style.color='#f0f'

Otras propiedades de style que puede probar:

document.body.style.fontFamily='Courier'
document.body.style.margin='40px'
document.body.style.border='1px solid #f00'
document.body.style.padding='20px'

Podemos ocultar todo el body modificando la propiedad 'visibility' de 'style' por el valor 'hidden' (luego la podemos hacer visible fijando el valor 'visible'): 

document.body.style.visibility='hidden'

Podemos hacer visible u ocultar la etiqueta body accediendo a la propiedad 'visibility' de 'style', y que se actualice cada 1000 milisegundos:

setInterval(() => {
  if (document.body.style.visibility === 'visible') {
    document.body.style.visibility = 'hidden'
  } else {
    document.body.style.visibility = 'visible'
  }
}, 1000)

Podemos hacer que el contenido de la página se muestre durante 3 segundos y luego se haga invisible para siempre:

setTimeout(() => {
  document.body.style.visibility = 'hidden'
}, 3000)
▾ html▾ head▾ meta▾ title#text: Prueba▾ body▾ h1#text: Lenguaje Python▾ p#text: Python fue creado a finales de los años ochenta.▾ p#text: El creador de Python es Guido van Rossum.