Sección 2: DOM

Lección 1: DOM (Modelo de Objetos del Documento

Es hora de que volvamos a desarrollar sitios web, pero esta vez con JavaScript. Hasta ahora hemos aprendido HTML y CSS, luego JavaScript pero separadamente. El verdadero poder radica en la combinación de estas tres tecnologías.

En el curso de Diseño Web mencionamos que a través JavaScript podemos agregar acciones a nuestros sitios web. ¿Qué significa esto? Añadiendo JavaScript a nuestros sitios web podemos:

• -Cambiar todos los elementos HTML en nuestras páginas web.
• -Podemos cambiar todos los atributos HTML en nuestras páginas web.
• -Cambiar todos los estilos CSS en nuestras páginas web.
• -Remover elementos y atributos HTML.

• -Añadir nuevos elementos y atributos HTML,

• -JavaScript puede también reaccionar a eventos HTML, y

• -JavaScript puede crear sus propios eventos HTML en nuestras páginas web.

Algunas de estas cosas, como cambiar el estilo CSS o atributos y elementos HTML, podíamos hacerlas antes, pero con JavaScript podemos hacerlas mientras el usuario está navegando nuestro sitio web.

En esta sección vamos a aprender todo acerca de lo comentado anteriormente. Para hacerlo debemos entender dos cosas:

• -El DOM (Modelo de Objetos del Documento.

• -El motor de JavaScript.

Hasta este punto hablamos sobre cómo nuestro navegador web, ante una solicitud de carga de una página, recibe primero un archivo HTML y luego un archivo CSS. Luego esto el navegador crea algo llamado el DOM (Modelo de Objetos del Documento), el cual luce de la siguiente manera:

Vemos que el DOM es un grafo, de tipo árbol, donde tenemos un conjunto de nodos relacionados donde al inicio (parte superior) tenemos al elemento “Document”, y debajo de él tenemos al elemento raíz (root element): nuestra etiqueta html.

A continuación de la etiqueta html tenemos al elemento head y al elemento body, donde por ejemplo el elemento body tiene un elemento “a” y un elemento “h1”. ¿Qué significa todo esto? Podemos ver esto mismo en la consola. En la consola el DOM o el Modelo de Objetos del Documento se lo conoce simplemente como “document”.

Si expandimos el elemento documento veremos lo siguiente:

Vemos que podemos ver todos los elementos de nuestra página web en nuestra consola.

¿Por qué necesitamos el DOM? Necesitamos una manera de obtener, cambiar, añadir o eliminar elementos HTML, y es para que fue creado el DOM.

Ejecutemos la siguiente sentencia y veamos que le ocurre a nuestra página web:

Como podemos ver toda nuestra página cambiar al mensaje "Hola Mundo".

Entonces el DOM es algo que el navegador web crea para permitirnos modificar el HTML y el CSS de nuestros sitios web.

¿Qué hay acerca del motor de JavaScript? Hemos hablado acerca de que cada navegador web ejecuta código JavaScript.

Cada navegador posee algo que se llama motor de JavaScript, y este motor lo que le permita a los navegadores web ejecutar código JavaScript. Los motores de JavaScript tiene nombres originales. En el caso de Chrome, su motor de JavaScript se llama V8, el de Edge se llama Chalker Core, el de Safari se llama Nitro y el de Firefox se llama SpiderMonkey.

Gracias a estos motores podemos usar JavaScript para comunicarnos con el DOM. Cuando ejecutamos la sentencia document.write(“Hola Mundo”), ejecutamos código JavaScript y nuestra página web cambió.

document es un objeto y write es un método de ese objeto que acepta como parámetro un string, el cual imprimirá en nuestro sitio web.

Los navegadores web nos permiten acceder al DOM a través del objeto document. Ahora tenemos el poder para hacer todas las cosas que nombramos al principio de esta lección.

Podemos decir que el objeto document es toda pantalla de nuestro navegador web en la visualizamos sitios web. ¿El objeto document tiene un objeto padre? Si, lo tiene, y es el objeto window.

Como podemos ver el objeto window posee muchas propiedades.

Si nos fijamos en el listado de propiedades, vemos que document es una de ellas.

Y si desplegamos la propiedad document vemos que tiene sus propias propiedades.

¿Recordamos los métodos alert y prompt? Podemos ver que pertenecen al objeto window.

Si ejecutamos window.alert("Hola Mundo"); vemos que funciona correctamente.

La razón por la que alert() funciona correctamente es porque window funciona como el objeto padre de todos los objetos, por lo que cada vez que escribimos, por ejemplo, el método alert(), la consola asume que este método pertenece al objeto window.

¿Recordamos el método document.write()? Veamos si podemos utilizar este método dentro de window?

Como podemos ver, obtenemos un error. Vemos que window.write() no es una función definida dentro del objeto window. Pero veremos que si existe el método write si lo llamamos de la siguiente manera: window.document.write("Hola Mundo");

Hagamos un repaso. Los navegadores web poseen un objeto window, el cual a su web contiene un objeto document, el cual especifica lo elementos que serán mostrados a través del DOM (modelo de objetos del documento).

El DOM lee los archivos HTML y CSS, y luego los archivos JavaScript son leídos por el motor de JavaScript de nuestro navegador web. Si algo en nuestras páginas web necesita ser cambiado, JavaScript puede comunicarse con el objeto document y modificar HTML y CSS.

Eso es todo por esta lección.

Nos vemos en la siguiente.

¡Adios!