Traducción de Artículo de Ajax XXIII

Dominar Ajax, Parte 5: Manipular el DOM
Usar JavaScript para actualizar tu página web al vuelo.
Nivel: Introductorio

Brett McLaughlin ( brett@oreilly.com), Autor y Editor, O´Reilly y Asociados.
11 Abril 2006

El mes pasado Brett introdujo el Modelo de Objetos de Documento, cuyos elementos trabajan detrás de escena para definir tu página Web. Este mes se sumerge todavía más profundo en el DOM. Aprender como crear, eliminar y cargar las partes de un árbol DOM, y dar el próximo paso para actualizar tus páginas Web al vuelo

Si seguiste mi discución de esta serie del mes pasado, tenes una visión de que sucede cuando un navegador Web muestra una de tus páginas. Como expliqué antes, cuando el HTML y el CSS que hayas definido para tu página es enviado a un navegador Web, es traducido desde texto a un modelo de objeto. Esto es cierto, así sea el código simple o complejo, contenido todo en un archivo o en archivos separados. El navegador trabajara entonces directamente con el modelo de objeto, más que con los archivos de texto que le entregaste. El modelo que el navegador usa se llama El Modelo de Objeto de Documento. Este conecta los objetos representando los elementos, atributos y texto en tus documentos. Todos los estilos, valores y más que nada los espacios en tu HTML y CSS son incorporados en el modelo de objetos. El modelo especifico para una página Web dada se llama "Arbol DOM" de la página.
Entender que es un árbol DOM, y mas conocer como representa tu HTML y CSS, es solo el primer paso para tomal el control de tus páginas Web. Después tenés que aprender como trabajar con el árbol DOM para una página Web particular. Por ejemplo, si agregas un elemento al árbol DOM, ese elemento inmediatamente aparece en el navegador Web del usuario--sin que se recargue la página. Eliminas algo de texto del árbol DOM y ese texto desaparece de la pantalla del usuario. Podes cambiar e interactuar con la interface del usuario a traves del DOM, que te da un tremendo poder y flexibilidad de programación. Una vez que aprendas como trabajar con un árbol DOM habrás hecho un gran salto hacia dominar ricos, interactivos y dinámicas páginas Web.
Observar que la siguiente discusión está basada en "Explotar el DOM para una respuesta Web" del mes pasado; si no has leido ese artículo, puede ser que prefieras hacerlo antes de seguir con esto.

Importancia de la pronunciación del acrónimo.
De todas formas, el modelo de objeto de documento, se habría podido llamar Modelo de Nodos de documentos. Por supuesto , la mayoría de la gente no sabe que significa el término nodo, y DNM no es tan fácil de pronunciar como DOM, por eso es fácil entender porque el W3C siguió con DOM.

Cruce de navegadores, cruce de lenguajes.
El modelo de objeto de doumento es un estandar de la W3C (ver Recursos por links a la W3C). Por esto, todos los navegadores Web modernos soportan DOM, al menos en algun grado. Si bien hay algunas variaciones entre navegadores, si usas la funcionalidad basica de DOM --y pones atencion a algunos casos especiales y excepciones-- tu código DOM va a trabajar en cualquier navegador de la misma manera. El código que escribas para modificar una pagina Web en Opera va a trabajar en el Safari de Apple, en Firefox, en Microsoft Internet Explorer y Mozilla.
El DOM es también una especificación de cruce de lenguajes; en otras palabras, podes usarlo desde la mayoria de los lenguajes de programación más populares. La W3C define varios vinculos de lenguaje para el DOM. Por ejemplo, podes encontrar vínculos de lenguaje para DOM bien definido para C, Java y JavaScript. Por esto podes usar DOM con cualquiera de esos lenguajes. Los vinculos de lenguaje estan disponibles también para muchos otros lenguajes, aunque muchos de estos no estan definidos por la W3C, sino en su lugar por terceros.
En esta serie me voy a enfocar en los vínculos de JavaScript en el DOM. Esto tiene sentido por que la mayoría de los desarrollos de aplicaciones asincronicas estan basados en escribir código JavaScript para ejecutar en un navegador Web. Con JavaScript y DOM, podes modificar la interfase del usuario al vuelo, responder a los eventos de los usuarios y a las entradas, y más --todo usando JavaScript bastante estandarizado.
Todo lo dicho, te animo a que revises los vinculos de lenguaje para DOM en otros lenguajes. Por ejemplo, podes usar los vinculos del lenguaje Java no solo para trabajar con HTML, sino tambien con XML, como voy a analizar en un artículo más tarde. Entonces las lecciones que aprenderas acá se aplican mucho mas que en HTML, en muchos mas ambientes que solo el lado cliente JavaScript.
El nodo conceptual
Un nodo es mas que un tipo de objeto básico en el DOM. De hecho, como verás en este artículo, casi todo otro objeto definido por DOM extiende el objeto del nodo. Pero, antes de que llegues muy lejos en la semantica, necesitas entender el concepto que se representa con un nodo; luegopara aprender las propiedades reales y metodos de un nodo es un pabada.
En un árbol DOM, casi todo lo que vas a encontrar es un nodo. Todo elemento es en su nivel más básico un nodo en el árbol DOM. Todo atributo es un nodo. Todo fragmento de texto es un nodo. Hasta los comentarios, caracxteres especiales (como ©, que representa eun simbolo de copyright), la declaracion DOCTYPE (si tenes una en tu HTML o XHTML) son todos nodos. Entonces antes de meterme en lo especifico de cada uno de esos typos individuales, realmente necesitas concer que es un nodod.
Un nodo es...
En términos simples, un nodo es solo una unica cosa en el arbol DOM. Lo vago de "cosa" es intencional, porque asíe s de especifico como puede ser. Por ejemplo, probablemente no es obvio que un elemento en tu HTML, como img, y un fragmento de texto en HTML, como "Bajar para más detalles" tengan mucho en comun. Pero eso es porque probablemente estes pensando en la función de esos tipos individuales, y enfocando en cuan diferentes son.
Considera, en su lugar, que cada elemento y fragmento de texto en un árbol DOM tiene un padre; ese padre es tambien el hijo de otro elemento (como cuando una imagen es anidada dentro de un elemento p) o es el primer elemento en el árbol DOM (que es un caso espaciel único para cada documento, y es donde se usa el elemento HTML). Considerar tambien que que ambos, elementos y texto, tienen un tipo. El tipo de un elemento es obviamente un elemento; el tipo de texto es texto. Cada nodo tiene tambien una estructura bastante bien definida para eso: Tiene un nodo (o nodos) debaajo de él, como elementos hijos? Tiene nodos hermanos (nodos "al lado de" el elemento o texto)? A que documento pertenece cada nodo?
Obviamente, mucho de esto suena bastante abstracto. De hecho, puede parecer tonto decir que el tipo de un elemento es... bueno... un elemento. Sin embargo, necesitas pensar un poco abstractamente para darte cuenta el valor de tener el nodo como un tipo de objeto común.
El tipo de nodo comun
La tarea simple que vas a realizar mas que ninguna otra en tu código DOM es navegar dentro de el árbol DOM de una página. Por ejemplo, podrías localizar un formulario por su atributo, y luego empezar a trabajar con el elemento y texto anidado en ese formulario. Van a haber intrucciones textuales, etiquetas para campos de entrada, elementos de ingreso reales, y pasiblemente otro tipo de elementos HTML como elementos img y links (un elemento). Si elementos y texto son tipos completamente diferentes, entonces tenés que escribir piesas de código completamente diferentes para mover desde un tipo a otro.
Las cosas son diferentes si usas un tipo de nodo comun. En ese caso podes simplemente moverte de nodo a nodo y preocuparte sobre el tipo solo cuando querés hacer algo específico con un elemento o texto. Mientras solo te muevas en el árbol DOM, vas a usar las mismas operaciones para moverte al padre del elemento --o a sus hijos-- como lo harias con cualquier tipo de nodo. Solo vas a tener que trabajar específicamente con un tipo de nodo, como un elemento o texto, cuando necesitás algo específico de determinado tipo de nodo, como un atributo de un elemento. Pensar en cada elemento del árbol DOM simplemente como un nodo te permite operar mucho mas sencillamente. Con eso en mente, voy a ver exactamente que tiene que ofrecer la construcción Nodo de DOM, empezando con propiedades y métodos.