This site uses cookies own and third. If you continue to browse consider to accept the use of cookies. OK More Info.

Curso de JavaScript | 12. DOM - el Document Object Model

  • 0 Replies
  • 242 Views

0 Members and 1 Guest are viewing this topic.

Offline Abarhild

  • *
  • Underc0der
  • Posts: 12
  • Actividad:
    10%
  • Reputación 2
    • View Profile
You are not allowed to view links. Register or Login

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:

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




Á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")
« Last Edit: August 22, 2022, 08:18:08 am by Abarhild »