Faq Javascript

Sommaire > Utilisation du DOM
        Qu'est ce que c'est que le DOM?
        Pourquoi un comportement de DOM différent sous FireFox et IE?
        Comment ajouter des élements dans une page?
        Comment supprimer tous les enfants d'un noeud en utilisant les méthodes DOM?
        Comment attribuer à des objets un onclick faisant appel à une variable de boucle?

Qu'est ce que c'est que le DOM?

[haut]

auteur : denisC

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'acceder aux élements d'une page HTML, mais standardise également les evenements 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 navigateur, dans leur version 2 pour IE et dans leur version 3 pour Firefox.

lien :

DOM Level 1
lien :

DOM Level 2

Pourquoi un comportement de DOM différent sous FireFox et IE?

[haut]

auteur : denisC

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?

Parceque IE et Firefox n'ont pas la même façon de parser les documents XML (y compris les HTML). Firefox va prendre en compte les noeuds textes consituté uniquement de caractères blancs, 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'ou les problemes de firstChild et autres childNodes, qui pointent sur des noeuds textes 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).

lien :

La gestion des noeuds vides dans Mozilla

Comment ajouter des élements dans une page?

[haut]

auteur : siddh

// 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.for = 'nouveauId';

nouveauInput.name = 'nouveau';
nouveauInput.id = 'nouveauId';
nouveauInput.type = 'text';

// raccord des noeuds
divParent.appendChild(nouveauDiv);
nouveauDiv.appendChild(nouveauLabel);
nouveauDiv.appendChild(nouveauInput);

Comment supprimer tous les enfants d'un noeud en utilisant les méthodes DOM?

[haut]

auteur : denisC

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.childNodes.length>0) {
  noeud.removeChild(noeud.firstChild);
}

lien : Exemple d'utilisation de ce script

Comment attribuer à des objets un onclick faisant appel à une variable de boucle?

[haut]

auteur : SpaceFrog

Dans des cas comme celui ci-dessous, ou on souhaite créer des éléments et leur attribuer un 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.setAttribute("onclick",function(){alert(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, et les divs sont correctement créés et insérés mais au click, 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 ou celui-ci est appelé. Et à 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.setAttribute("onclick",function(){alert(this.indice)})
		MonDiv.onclick=function(){alert(this.indice)}
		document.body.appendChild(MonDiv);
	}
}

lien : Exemple d'utilisation de ce script

Consultez les autres F.A.Q's

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 ni 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.