Underc0de

Programación Web => Front-end => Topic started by: Abarhild on July 21, 2022, 12:47:32 pm

Title: Curso de JavaScript | 12. DOM - el Document Object Model
Post by: Abarhild on July 21, 2022, 12:47:32 pm
(https://i.postimg.cc/CMC5cPrD/Java-Script-1.png) (https://postimages.org/)

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:


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


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:

Code: (javascript) You are not allowed to view links. Register or Login
window.innerWidth

El Document Object Model como árbol
El DOM también se puede imaginar como un árbol. En la siguiente ilustración, el árbol está acostado de lado. La raíz sería el elemento "document".

(https://i.postimg.cc/tgCYxXGm/dom.jpg)


Á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: