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
  • 200 Views

0 Members and 1 Guest are viewing this topic.

Offline Abarhild

  • *
  • Underc0der
  • Posts: 9
  • Actividad:
    30%
  • Reputación 1
    • 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

Á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: July 21, 2022, 11:50:15 pm by AXCESS »