Conociendo el DOM [March 8, 2012, 6:15 a.m.]
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 vería 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.
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: