Conociendo el DOM
En la tarea anterior vimos como podemos modificar de manera dinámica el estado de un elemento HTML (en nuestro caso el botón del formulario). Pero, por qué podemos hacer esto? cómo funciona?
Lo primero que tienes que saber es que cuando tu browser procesa contenido HTML el crea un Modelo de Objetos del Documento (DOM) y trabaja con eso. De manera simple, se puede ver al DOM como una copia de tu documento HTML sobre la cual los browsers trabajan. La estructura lógica del DOM es muy parecida a la de un árbol. Tomemos como ejemplo un archivo HTML con un formulario:
<html>
<head>
</head>
<body>
<form>
<input />
<input />
</form>
</body>
</html>
OJO: Omití los atributos para hacer enfasis en la estructura.
El DOM se puede visualizar así:
Cada cuadro se conoce como nodo. Nosotros podemos crear, borrar o modificar nodos utilizando JS . Logramos esto por medio de diversas funciones desarrolladas para interactuar con el DOM, como getElementById que nos permite accesar a cualquier nodo por medio de su ID.
También podemos llegar a un elemento "recorriendo" el árbol. Por ejemplo, si quisieramos llegar a los elementos <input>, podríamos llegar por medio de document->html->body->form y ahí tendríamos que indicar cual de los 2 input queremos accesar.
Los cambios que se realizan en el DOM de una página se reflejan en tiempo real. Esto significa que si nosotros modificamos el DOM de una página, la página cambiará para el usuario final sin que tenga que hacerle refresh a la página.
Te recomendamos: