Le DOM (Document Object Model) est un modèle standardisé par le W3C.
Ce modèle propose de représenter un document sous la forme d'un arbre. Toutes les balises HTML sont donc des noeuds de l'arbre et les feuilles sont soit des balises sans contenu, soit le texte de la page HTML.

Le DOM propose une façon unifiée d'accéder aux éléments d'une page HTML, mais standardise également les événements pouvant survenir sur ces pages, ainsi qu'un grand nombre de propriétés des pages.
Le DOM et les méthodes qui y sont définies sont aujourd'hui très largement supportés par les navigateurs, dans leur version 2 pour IE et dans leur version 3 pour Firefox.

Déclinaison typiques :

• pourquoi est ce que root_node.childNodes[j].childNodes.length renvoie undefined ?
• pourquoi est ce que root_node.firstChild.childNodes.length renvoie undefined ?

Parce que IE et Firefox n'ont pas la même façon de parser les documents XML (y compris le XHTML). Firefox va prendre en compte les noeuds texte constitués uniquement de caractères blancs (par exemple les retours à la ligne du code), ce que IE ne fait pas.
Exemple :

<?xml version="1.0" encoding="UTF-8" standalone="yes" ?>
<list>
<tel><nom>abcdef</nom><id>123</id></tel>
<tel><nom>xyz</nom><id>124</id></tel>
</list>

Donnera sous IE (qui est l'arbre le plus communément attendu):

|--list
|--tel
| |--nom
| | |--"abdcef"
| |--id
| |--"123"
|--tel
|--nom
| |--"xyz"
|--id
|--"124"

Et sous Firefox:

|--list
|--" "
|--tel
| |--nom
| | |--"abdcef"
| |--id
| |--"123"
|--" "
|--tel
| |--nom
| | |--"xyz"
| |--id
| |--"124"
|--" "

D'où les problèmes de firstChild et autres childNodes, qui pointent sur des noeuds texte au lieu de noeuds internes attendus.
La solution : créer un nettoyeur de noeuds qui supprime les noeuds textes vides (ne contenant que des caractères blancs).

La méthode suivante permet de supprimer tous les enfants d'un noeud DOM, en utilisant uniquement les méthodes du DOM :

var noeud;
while (noeud.firstChild) {
  noeud.removeChild(noeud.firstChild);
}

Dans des cas comme celui ci-dessous, où l'on souhaite créer des éléments et leur attribuer un événement onclick dépendant d'une variable de boucle :

function foo(){
  for (i=0; i<10; i++){
    var MonDiv = document.createElement('DIV');
    MonDiv.innerHTML = "div " +i;
    MonDiv.onclick = function(){ alert(i); };
    document.body.appendChild(MonDiv);
  }
}

Cette méthode permet de créer 10 nouveaux divs contenant les textes "div 1", "div 2", … et de les insérer dans la page. On leur a également attribué un onclick avec pour but de faire un alert() de "1" sur le premier div, "2" sur le second, etc.

Malheureusement cela ne fonctionne pas, les divs sont correctement créés et insérés mais au clic, tous affichent le message "10". En fait, la valeur de i n'est pas évaluée au moment de la mise en place du onclick, mais seulement au moment où celui-ci est appelé. Or à ce moment, sa valeur vaut bien 10, la dernière valeur de la boucle.

La solution est d'affecter la valeur de l'indice comme propriété au div et de se servir de cette propriété pour faire le onclick :

function foo(){
	for (i=0;i<10;i++){
		var MonDiv=document.createElement('DIV');
		MonDiv.innerHTML = "div " + i;
		MonDiv.indice = i;
		MonDiv.onclick = function(){ alert(this.indice); };
		document.body.appendChild(MonDiv);
	}
}