IdentifiantMot de passe
Mot de passe oublié ?Je m'inscris ! (gratuit)
logo
Sommaire > Utilisation du DOM
        Qu'est ce que c'est que le DOM ?
        Pourquoi le comportement du DOM est-il différent sous FireFox et IE ?
        Comment ajouter des éléments 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 ?
auteur : denisC
Le DOM (Document Object Model) est un modèle standardisé par le en 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.

lien : fr DOM Level 1
lien : fr DOM Level 2

Pourquoi le comportement du DOM est-il différent sous FireFox et IE ?
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 ?
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).

lien : en La gestion des noeuds vides dans Mozilla

Comment ajouter des éléments dans une page ?
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.htmlFor = '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 ?
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.firstChild) {
  noeud.removeChild(noeud.firstChild);
}
lien : Exemple d'utilisation de ce script

Comment attribuer à des objets un onclick faisant appel à une variable de boucle ?
auteur : SpaceFrog
Dans des cas comme celui ci-dessous, où l'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.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 ou 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);
}
}
lien : Exemple d'utilisation de ce script


Consultez les autres F.A.Q.

Valid XHTML 1.0 TransitionalValid CSS!

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.