Introducción al DOM - Document Object Model
La interfaz se crea con HTML y CSS, y el contenido de la salida HTML se puede ampliar o intercambiar con javascript. De la misma forma, se puede utilizar javascript para reaccionar ante el uso del ratón o del teclado.

El primer paso para manipular la salida HTML es observar el DOM. DOM significa "Document Object Model" o en español: "Modelo de objetos del documento". El DOM está disponible para nosotros en cualquier navegador que nos muestre una página HTML.

A través del Modelo de objetos del documento (DOM) podemos:

• abordar a cada elemento HTML individualmente (leer o cambiar).
• insertar elementos adicionales antes o después de ciertos elementos.
• ¡DOM es independiente de un lenguaje de programación! Además de javascript, también se puede trabajar con el DOM utilizando Java y ECMAScript.

El navegador nos proporciona dos objetos importantes como parte del DOM:

• document
• window

Numerosos métodos y propiedades están disponibles para nosotros a través de estos dos objetos.



Mostrar la consola para la visualización de posibilidades de document/window
Si ahora ingresamos la instrucción console.log(window); o console.log(document); en la consola, vemos una gran cantidad de información a la que podemos acceder y luego manipular a través de esos métodos.

Por ejemplo, se puede imprimir el ancho de la ventana del navegador a través de:

window.innerWidth

Árbol HTML y acceso a él a través de DOM
Podemos acceder a cada elemento individual de nuestro árbol a través de los elementos secundarios. Para hacer esto, se debe de moverse a lo largo del árbol HTML. Pero esto no es realmente divertido y, por lo tanto, hay opciones mucho más cómodas, como por ejemplo:

• document.getElementById("id")
• document.getElementsByClassName("color1")
• document.getElementsByTagName("h2")