Soutenez-nous

FAQ JavaScriptConsultez toutes les FAQ

Nombre d'auteurs : 43, nombre de questions : 176, dernière mise à jour : 19 décembre 2013 

 
OuvrirSommaireUtilisation du DOM

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.

Créé le 3 janvier 2006  par denisC

Lien : DOM Level 1
Lien : DOM Level 2

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 :

 
Sélectionnez
<?xml version="1.0" encoding="UTF-8" standalone="yes" ?>
<list>
<tel>&lt;nom>abcdef</nom><id>123</id></tel>
<tel>&lt;nom>xyz</nom><id>124</id></tel>
</list>

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

 
Sélectionnez
|--list
|--tel
| |--nom
| | |--"abdcef"
| |--id
| |--"123"
|--tel
|--nom
| |--"xyz"
|--id
|--"124"

Et sous Firefox:

 
Sélectionnez
|--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).

Créé le 3 janvier 2006  par denisC

Lien : La gestion des noeuds vides dans Mozilla

 
Sélectionnez
// recherche du noeud parent
var divParent = document.getElementById('divParent');
 
// création des nouveaux noeuds
var nouveauDiv = document.createElement('div');
var nouveauLabel = document.createElement('label');
var nouveauInput = document.createElement('input');
 
// paramétrage des nouveaux noeuds
nouveauLabel.appendChild(document.createTextNode("Mon nouveau label :"));
nouveauLabel.htmlFor = 'nouveauId';
 
nouveauInput.name = 'nouveau';
nouveauInput.id = 'nouveauId';
nouveauInput.type = 'text';
 
// raccord des noeuds
divParent.appendChild(nouveauDiv);
nouveauDiv.appendChild(nouveauLabel);
nouveauDiv.appendChild(nouveauInput);
Mis à jour le 4 mars 2009  par siddh

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

 
Sélectionnez
var noeud;
while (noeud.firstChild) {
  noeud.removeChild(noeud.firstChild);
}
Créé le 13 novembre 2006  par denisC

Lien : Exemple d'utilisation de ce script

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 :

 
Sélectionnez
function foo(){
  for (i=0;i&lt;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 :

 
Sélectionnez
function foo(){
	for (i=0;i&lt;10;i++){
		var MonDiv=document.createElement('DIV');
		MonDiv.innerHTML="div " +i;
		MonDiv.indice=i;
		MonDiv.onclick=function(){alert(this.indice)}
		document.body.appendChild(MonDiv);
	}
}
Créé le 19 avril 2006  par SpaceFrog

Lien : Exemple d'utilisation de ce script

  

Les sources présentées sur cette page sont libres de droits et vous pouvez les utiliser à votre convenance. Par contre, la page de présentation constitue une œuvre intellectuelle protégée par les droits d'auteur. Copyright © 2004 Developpez Developpez LLC. Tous droits réservés Developpez LLC. Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents et images sans l'autorisation expresse de Developpez LLC. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.