innerHTML est le moyen le plus simple pour introduire du code html dans le document:
document.getElementById("mondiv").innerHTML = '<p>Visitez le site <a href="http://www.ilu.be">wikilu</a></p>';
innerHTML n'est pas dans la norme du DOM mais est une norme de fait, implémentée dans tous les grands navigateurs. innerHTML est bien plus rapide à l'exécution que les méthodes du DOM. innerHTML est plus court et plus simple à écrire, il est incontournable pour insérer du code HTML venant d'une page d'un d'autre site, un flux RSS par exemple.
Si le container du code HTML n'existe pas encore:
var newdiv = document.createElement("div");
newdiv.innerHTML = '<p>Visitez le site <a href="http://www.ilu.be">wikilu</a></p>';
var container = document.getElementById("container");
container.appendChild(newdiv);
innerHTM est recommandable si vous devez juste afficher du contenu dans un div ou un span vide, sans avoir par la suite à devoir modifier le code HTML ainsi créé. Le code peut contenir des id, des class, des styles, des événements onclick ou autres, etc ... et tout fonctionnera sans problème.
Par contre, innerHTML ne convient pas pour manipuler du code HTML Par exemple, dans:
document.getElementById("mondiv").innerHTML .= " texte à ajouter";
tous les événements tels que onclick qui existaient dans la partie gardée seront perdus.
De même, vous pouvez oublier innerHTML si vous devez ensuite utiliser les méthodes du DOM sur les nodes du code HTML inséré.
innerHTML permet d'insérer une table dans un div et permet aussi de modifier le contenu d'une cellule th ou td, par contre la manipulation des rangées tr ne fonctionne pas toujours correctement.
Le DOM est composé d'éléments node (noeuds). Il existe 2 types de noeuds: des noeuds correspondant à des balises (html, head, body, p, h1, a, etc...) qui peuvent avoir des noeuds enfants, et des noeuds textes (sans enfants), qui contiennent les différents textes du document.
Le noeud html, à la racine du document, peut être atteint à l'aide de document.documentElement, alors que le body peut être atteint à l'aide de document.body.
On passe d'un noeuds à l'autre à l'aide des méthodes montrées dans les exemples suivants:
monparent = monnoeud.parentNode; premier = document.body.firstChild; dernier = document.body.lastChild; nbre = document.body.childNodes.length; suivant = monnoeud.nextSibling; precedent = monnoeud.previousSibling;
'nextSibling' et 'previousSibling' trouvent les noeuds qui ont le même parent et qui suivent ou précèdent le noeud courant. Si un tel noeud n'existe pas, ces propriétés ont pour valeur null.
La propriété nodeType d'un noeud permet de distinguer les noeuds textes (valeur 3) des autres noeuds:
estTexte = (monnoeud.nodeType == 3);
et on peut trouver ou modifier la valeur d'un noeud texte à l'aide de sa propriété nodeValue:
alert(noeud.nodeValue);
On peut trouver les noms des neouds non-texte à l'aide de nodeName, dont le résultat est retourné en majuscule:
estImage = (noeud.nodeType != 3 && noeud.nodeName == 'IMG');
Il faut prendre garde au fait que lorsqu'on ajoute ou retire un noeud, certaines références peuvent ne plus se référer au même élément qu'avant la modification. De plus, certains navigateurs ajoutent des noeuds-texte pour des espaces ou des retour à la ligne entre les tags, alors que d'autres ne le font pas, ce qui peut fournir des arbres DOM différents d'un navigateur à l'autre.
Pour éviter ces problèmes, on peut trouver des noeuds bien déterminés à l'aide des méthodes:
noeud = document.getElementById(idnoeud); noeuds = moncontainer.getElementsByTagName(tag);
Ainsi, document.getElementById('matable') retourne le noeud dont l'id est 'table'
etdocument.getElementById('matable').getElementsByTagName('td') retourne tous les noeuds 'td' enfants, petits-enfants, ... du noeud 'table'.
Avec le paramètre '*' , moncontainer.getElementsByTagName('*') retourne tous les tags contenus dans 'moncontainer'. Ainsi, le nombre total de noeuds du body est donné par document.body.getElementsByTagName('*').length et donne une idée de la complexité de la page.
document.getElementById étant très long à taper pour une opération aussi commune, il est fréquent de définir la fonction dollar pour raccourcir l'écriture:
function $(id) {
return document.getElementById(id);
}
$('monimage').src = '../img/image1.gif';
appendChild ajoute le noeud à la fin suivant la syntaxe noeudParent.appendChild(noeud)
insertBefore insère le noeud juste avant un autre noeud suivant la syntaxe noeudParent.insertBefore(nouvNoeud, noeudExistant)
replaceChild remplace un noeud par un autre suivant la syntaxe noeudParent.insertBefore(nouvNoeud, noeudaRemplacer)
remoceChild retire un noeud suivant la syntaxe noeudParent.removeChild(noeud)
La méthode createElement crée un noeud non-texte, alors que la méthode createTextNode crée un noeud texte. Par exemple:
var noeudTitre = document.createElement('H1');
var leTitre = document.createTextNode('Chapitre 1');
noeudTitre.appendChild(leTitre);
document.body.appendChild(noeudTitre);
La fonction suivante va vider complètement un élément de tous ses enfants.
function clearElement(el) {
if (typeOf(el) == 'string') el = document.getElementById(el);
if ( el.hasChildNodes() ) {
while (el.childNodes.length >= 1 ) {
el.removeChild(el.firstChild );
}
}
}
