Traducción de artículo de Ajax XXII

Introducir el DOM
Hasta ahora has escuchado que los navegadores transforman una página Web a una representación de objeto y tal vez también hayas adivinado que la representación de Objeto es un árbol DOM. DOM sustituye a Modelo de Objeto de Documento y es una especificación disponible para la World Wide Web Consortium (W3C) ( podes ver varios links relacionados con DOM en los recursos)
Más importante todavía, el DOM define los tipos de objeto y propiedades que permiten al navegador representar el markup (El próximo artículo de esta serie se focaliza en las especificaciones de uso de DOM para tu JavaScript y código Ajax).
El Objeto documento
Primero y principal, vas a necesitar acceder al modelo de objeto en si mismo. Esto es extraordinariamente fácil; para usar la variable incorporada document en cualquier parte del código JavaScript funcionando en tu página Web, podes escribir código como este:

var domTree = document;

Por supuesto, este código es bastante inútil de por si, pero demuestra que todo navegador Web pone a disposición el objeto document para el código JavaScript y que el objeto representa el árbol completo del markup (figura 1).
Todo es un nodo
Claramente, el objeto document es importante, pero solo es el comienzo. Antes de que puedas ir más lejos, necesitas aprender otro término: nodo. Ya sabés que cada parte del markup es representada por un objeto, pero es más que cualquier objeto -- es un tipo de objeto especifico, un nodo DOM. Los tipos más específicos --como texto, elemento y atributos-- son extensiones del este tipo de nodo básico. Así que tenés nodos de texto, nodos de elementos y nodos de atributos.
Si has programado mucho en JavaScript, debería ocurrirte que ya has usado código DOM. Si seguiste esta serie de Ajax hasta este momento, definitivamente has usado código DOM en algún momento ahora. Por ejemplo, la línea var number = document.getElementById("phone").value; usa DOM para encontrar un elemento especifico y devolver el valor de ese elemento (en este caso, un campo de formulario). Aunque no te hayas dado cuenta, usaste DOM cada vez que escribiste document en tu código JavaScript.
Para refinar los términos que ya has aprendido, un árbol DOM en un árbol de objetos, pero más específicamente en un árbol de objetos nodo. En aplicaciones Ajax --o cualquier otro JavaScript-- podés trabajar con esos nodos para crear efectos tales como remover un elemento y su contenido, resaltar una parte del texto o agregar un nuevo elemento de imagen. Como todo esto ocurre en el lado cliente (código que se ejecuta en tu navegador Web), estos efectos tiene lugar inmediatamente sin comunicación con el servidor. El resultado final es una aplicación que se siente que responde bien por que las cosas en la página Web cambian sin largas pausas mientras que una petición va al servidor en una respuesta es interpretada.
En la mayoría de los lenguajes de programación, necesitas aprender el nombre de objeto real para cada tipo de nodo, aprender las propiedades disponibles y comprender sobre tipos y elencos; pero ninguno de estos es necesario en JavaScript. Podes, simplemente crear una variable y asignarla en el objeto que quieras (tal como has visto):

var domTree = document;
var phoneNumberElement = document.getElementById("phone");
var phoneNumber=phoneNumberElement.Value;

No hay tipos y JavaScript se encarga de crear las variables y asignarles el tipo correcto como sea necesario. Como resultado, se vuelve bastante trivial usar DOM desde JavaScript (en un artículo próximo nos focalizaremos en DOM relacionado con XML y cosas que son un poco mas difíciles).
En Conclusión
En este punto, te voy a dejar con muchas preguntas sin respuestas. Obviamente, esto no ha sido una cobertura exaustiva del DOM; de hecho este articulo es un poco más que una introducción al DOM. Hay mucho mas DOM del que te he mostrado hoy!
El próximo artículo de esta serie se expande en esas ideas y profundiza mas en como podés usar DOM en tu JavaScript para actualizar páginas Web, hacer cambios al vuelo en tu HTML y crear una experiencia mas interactiva para tu usuario. Voy a volver al DOM una vez mas en los últimos artículos que focalizarán en usar XML en tus peticiones AJAX. Así que familiarizate con el DOM; es la parte principal de las aplicaciones Ajax.
Seria bastante simple lanzar más del DOM en este punto, detallar como moverse dentro de un árbol DOM, obtener los valores de los elementos y el texto, iterar en las listas de nodos, y mas, pero eso probablemente te dejaría con la impresión de que DOM es sobre código --no lo es.
Antes del próximo artículo, trata de pensar sobre estructuras de árbol y trabaja en algunos de tus propios HTML para ver como un navegador Web cambia es HTML a una vista de árbol del markup. También, piensa en la organización del árbol DOM y trabaja en los casos especiales analizados en este artículo: atributos, texto que tiene elementos mezclados dentro de él, elementos que no tiene contenido de texto (como el elemento img).
Si obtenés una comprensión firme de esos conceptos y luego aprendes la sintaxis de JavaScript y de DOM (en el próximo artículo), va a hacer el trabajo de hacer que responda bien, mucho más fácil.
Y no te olvides, acá están las respuestas de los listings 2 y 3 que también están incluidas en el código de muestra.

Figura 2. Respuesta del Listing 2

Figura 3. Respuesta del Listing 3