Conociendo el DOM [March 8, 2012, 6:05 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). 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. Logramos eso por medio de diversas funciones, 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.