| 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
|
| 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
|
| auteur : siddh |
var divParent = document.getElementById('divParent');
var nouveauDiv = document.createElement('div');
var nouveauLabel = document.createElement('label');
var nouveauInput = document.createElement('input');
nouveauLabel.appendChild(document.createTextNode("Mon nouveau label :"));
nouveauLabel.for = 'nouveauId';
nouveauInput.name = 'nouveau';
nouveauInput.id = 'nouveauId';
nouveauInput.type = 'text';
divParent.appendChild(nouveauDiv);
nouveauDiv.appendChild(nouveauLabel);
nouveauDiv.appendChild(nouveauInput); |
|
| 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és sur cette pages sont libre de droits,
et vous pouvez les utiliser à votre convenance. Par contre cette page de présentation de ces sources constitue une oeuvre intellectuelle protégée par les droits d'auteurs.
Copyright ©2004
Developpez LLC. Tout 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'à 3 ans
de prison et jusqu'à 300 000 E de dommages et intérets.
Cette page est déposée à la SACD.
|