Le modèle de document de JavaScript "à l'ancienne"
Les premières versions de javascript ne permettaient pas de manipuler le document de manière souple.
Seuls étaient accessibles
les formulaires (forms), les images, les layers, et les liens.
Chacun de ces éléments était accessible à travers un tableau :
document.forms[]
,
document.images[]
,
document.layers[]
et
document.links[]
.
pour les éléments en question, s'ils avaient un nom, ils étaient accessibles par document.NOM.
Le DOM XML
conforme à l'API DOM (vue en cours de java)
permet la manipulation du document comme un arbre XML
en théorie, contrôle total sur le document
en pratique, certains navigateurs ne supportent pas certaines manipulations.
Accès aux éléments
Il est possible de naviguer dans l'arbre XML, mais c'est une souvent très mauvaise idée
la méthode normale est de doter un élément d'un identificateur, et d'utiliser la méthode
document.getElementById()
Une petite remarque sur le DOM. La structure de l'élément HTML précédent est la suivante
NODE : LI
+children[0] : TEXTNODE
| nodeValue : "la méthode normale est de doter un élément d'un identificateur, et d'utiliser la méthode"
+children[1] : CODE
+children[0] : TEXTNODE
nodeValue: document.getElementById()
On comprend qu'il soit difficile de manipuler ce texte.
<script type="text/javascript">
function testGEBYID() {
var s= document.getElementById('testGetElementLI').childNodes[0].nodeValue;
s+= document.getElementById('testGetElementLI').childNodes[1].childNodes[0].nodeValue;
alert(s);
}
</script>
<button onclick="testGEBYID()">démonstration</button>
Normalement, on ne touche qu'à des éléments relativement simples.
Sélection de Méthodes et propriétés disponibles sur un nœud
innerHTML : pas standard, code HTML interne de l'élément ;
childNodes : tableaux des éléments fils ;
firstChild : équivalent de childNodes[0]
nodeValue : uniquement disponible sur les attributs ou les éléments texte: texte du nœud ;
nodeType : 1 pour éléments (balises) ; 2 (ou undefined !) pour attributs ; 3 pour nœuds textes.
id : identifiant du nœud
getAttribute(NOM) : pour un nœud/élément, valeur d'un de ses attributs
setAttribute(NOM) : pour un nœud/élément, permet de fixer la valeur d'un attribut. N'est pas forcément pris en compte
par le navigateur !!!
// Affichage récursif d'un nœud, en ne s'intéressant qu'aux nœuds textes.
function afficherNoeud(n) {
s= "";
switch (n.nodeType) {
case 1:
for (i=0; i< n.childNodes.length; i++) {
s+= afficherNoeud(n.childNodes[i]);
}
break;
case 3:
s= n.nodeValue;
break;
}
return s;
}
Remarque
Certains nœuds ont des champs supplémentaires, qui simplifient la vie. Par exemple, les nœuds qui correspondent à des entrées de formulaire dispose
d'une propriété value.
On trouvera une liste de ces propriétés à l'adresse
http://www.w3schools.com/htmldom/dom_obj_text.asp.
Modification des éléments
On triche : innerHTML
Principe
innerHtml est une propriété des éléments DOM, et représente le code HTML compris à l'intérieur
d'une balise. Par exemple, si j'ai la balise :
L'intérêt de cette propriété est qu'on peut l'utiliser pour modifier le contenu d'une balise.
Exemple
Du texte à remplacer....
Le code correspondant:
<span id='testInnerHTML'>
Du texte à remplacer....
</span>
<button onclick="javascript:remplacerInnerHTML()">remplacer texte</button>
<script type="text/javascript">
function remplacerInnerHTML() {
//alert("ancienne valeur "+ document.getElementById('testInnerHTML').innerHTML);
document.getElementById('testInnerHTML').innerHTML="le <b>texte de remplacement</b>";
}
</script>
Intérêt et limitation
Très simple à utiliser
Propriétaire, mais existe maintenant sur tous les navigateurs
Pas forcément moins portable que l'utilisation "orthodoxe" du DOM
Ne fonctionne pas avec tous les éléments, en particulier sous IE (ne permet pas de modifier une case d'une table).
Remplace tout l'élément. Pas forcément indiqué pour construire des arbres dynamiques, des tables, etc...
Création en passant par le DOM
Théoriquement, c'est la manière normale. Elle permet, entre autres, d'ajouter des éléments au DOM.
Deux étapes : créer un élément, et d'insérer dans l'arbre.
Création d'élément
Deux méthodes de document :
createElement('nomDuTag') : crée un élément (balise) pour un type donné de balise. exemple
titre= document.createElement('h1');
createTextNode('contenu de l'élément')
Les éléments sont simplement créés, et pas insérés dans l'arbre.
Insertion d'élément
On insère les éléments dans un élément parent, en utilisant les méthodes suivantes (n étant un nœud) :
n.appendChild(nouveauNoeud) : ajoute un nœud comme dernier fils
n.removeChild(n) : enlève un nœud
n.replaceChild(old,new) : remplace un nœud par un autre.
n.insertBefore(a,b) : insère a juste avant le nœud b.
Exemple
JavaScript et les CSS (Cascading Style Sheets)
Les CSS permettent de séparer la présentation de la structure dans une page web.
Les attributs de style CSS d'un élément du DOM permettent de changer son aspect.
Ils sont accessibles par la propriété "style" des éléments.
Les caractéristiques de cet élément sont contrôlées par les CSS.
function setCSS() {
elt= document.getElementById('controleParCSS');
cssValue= document.cssTest.cssValue.value;
switch (document.cssTest.cssName.value) {
case 'background':
elt.style.background= cssValue;
break;
case 'color':
elt.style.color= cssValue;
break;
case 'fontSize':
elt.style.fontSize= cssValue;
break;
case 'display':
// none : caché ; inline : dans le cours du texte; block : comme un bloc.
elt.style.display= cssValue;
break;
case 'position':
// static, absolute ou relative
elt.style.position= cssValue;
break;
case 'left':
elt.style.left= cssValue;
break;
case 'right':
elt.style.right= cssValue;
break;
case 'top':
elt.style.top= cssValue;
break;
case 'bottom':
elt.style.bottom= cssValue;
break;
case 'width':
elt.style.width= cssValue;
break;
case 'float':
// élément flottant : left, right, none
elt.style.cssFloat= cssValue;
}
// empêche le rechargement de la page
return false;
}