Antes de continuar adentrando con AJAX, es de suma importancia conocer los conceptos del DOM, aprender a manipularlo, modificarlo, accesarlo, para así crear aplicaciones capaces de interactuar con XML o XHTML.

El acrónimo DOM significa Document Object Model, y es un estándar de la w3 que los exploradores implementan, con algunas pocas diferencias, pero si pones atención a casos especiales, ten por seguro que tus documentos podrán ser visualizados en navegadores como Apple’s Safari®, Firefox®, Microsoft® Internet Explorer®, Opera® y Mozilla®.

El DOM también es cross-language, esto significa que lenguajes como C++, JAVA, JavaScript contienen API’s donde implementan los conceptos y especificaciones para la manipulación de este, por ahora voy solo a tratar JavaScript, pues en las aplicaciones Web es necesario modificar la interfase del usuario en tiempo real, y esto lo hacemos con JavaScript.

The DOM Tree (El árbol del DOM) Es necesario tener claro el este concepto para poder seguir adelante, si estas familiarizado con estructura de datos, esto te será muy sencillo comprenderlo, un documento HTML es nada mas y nada menos que un árbol, cada elemento es un nodo, y cada nodo puede contener a otros nodos, cada texto, cada div, cada etiqueta es un nodo de el árbol.

[code lang=”strict4xhtml”]
"http://www.w3.org/TR/xhtml1/DTD/xhtml-strict.dtd">

[/code]

El documento anterior, gráficamente se visualizaría así.

Los nodos contienen las siguientes propiedades en común

nodeName: Contiene el nombre del nodo
nodeValue: Contiene el “valor” del nodo
parentNode: Regresa el nodo padre, recordar que todos los elementos pertenecen a otro nodo padre.
childNodes: Es la lista de nodos hijos. Cuando trabajamos con HTML, esto es usable solo cuando tratamos con elementos, nodos de texto y atributos, no tienen ningún hijo.
firstChild: Es simplemente un atajo para ir al primer nodo de la lista childNodes.
lastChild: Es otro atajo para ir al último nodo de la lista childNodes.
previousSibling: Regresa el nodo anterior al nodo actual de la lista childNodes, es decir, cuando estamos iterando la lista, podemos regresar al nodo anterior utilizando este método.
nextSibling: Similar al anterior, a diferencia que regresa el siguiente nodo de la lista childNodes.
Attributes: Regresa una lista de los atributos.

Los nodos también contienen métodos en común, los cuales describo a continuación.

insertBefore(newChild, referenceNode): inserta un nodo antes del nodo actual.
replaceChild(newChild, oldChild): remplaza el antiguo nodo por uno Nuevo.
removeChild(oldChild): elimina el nodo en el que estas.
appendChild(newChild): Agrega un nodo al final de la lista de nodos hijos.
hasChildNodes(): regresa un true si el nodo actual contiene hijos, o false en caso contrario.
hasAttributes(): Regresa un true si el nodo actual contiene atributos, un false en caso contrario.

Con estos métodos y propiedades vamos a jugar un rato con el documento que tenemos, he preparado dos pruebas, para mostrar el funcionamiento del DOM.

[code lang=”javascript”]
var myDocument = document;
var htmlElement = myDocument.documentElement;
alert(”El elemento root es: ” + htmlElement.nodeName);

expande(htmlElement.childNodes);

function expande(hijos){
if (hijos != null) {
for(var i=0;i < hijos.length;i++){
var element = hijos[i];

alert("Encontramos el elemento de tipo: " + element.nodeName+", tag="+element.tagName);

}
}
}
[/code]

Ahora voy a mostrar como obtener un nodo por medio de su ID. Antes de esto, es necesario mencionar que el ID debe ser único para cada nodo, de lo contrario habrá conflictos entre nodos.

[code lang="javascript"]
var nodo = document.getElementById("cabecera");

nodo.id;
//->cabecera

nodo.tagName;
//->DIV

Para poder tomar una lista o arreglo de nodos, de un mismo tipo, lo hacemos así.

var padre = document.getElementById(”menu”);

var nodos = padre.getElementsByTagName(”li”);
//->[li,li,li]
[/code]

Antes de continuar tengo que mencionar sobre los tipos de nodos que hay, pues es importante tener en cuenta de que tipo es el nodo que se esta tratando, para así poder prevenir errores. Para identificar el tipo de nodo, es necesario utilizar la propiedad nodeType. De esta manera.

[code lang=”javascript”]
var someNode = document.documentElement.firstChild;

if (someNode.nodeType == Node.ELEMENT_NODE) {
alert(”Se encontró un elemento llamado ” + someNode.nodeName);
} else if (someNode.nodeType == Node.TEXT_NODE) {
alert(”Es un elemento de texto; el texto es: ” + someNode.nodeValue);
} else if (someNode.nodeType == Node.ATTRIBUTE_NODE) {
alert(”Es un atributo llamado ” + someNode.nodeName
+ ” Con valor ‘” + someNode.nodeValue + “‘”);
}
[/code]

Hasta ahora hemos visto como poder leer el árbol del DOM, ahora lo siguiente que mostraré es cómo poder eliminar el último elemento de la lista que contiene el menú, esto se hace utilizando el método removeChild().

Conclusión
Es importante conocer, el DOM, poder moverte en este, de esta manera estarás capacitado para trabajar de una forma muy sencilla junto con AJAX. Es importante mencionar también que cuando escribes un documento HTML, debes asegurarte que lo estas escribiendo correctamente, para poder acceder a él sin dificultad.

Referencias
http://www.w3.org/DOM/
http://www-128.ibm.com/developerworks/web/library/wa-ajaxintro5/index.html