Apprendre Javascript pour rendre vos pages Web interactives
Leçon 20: Objet Document et DOM en Javascript (Partie 2)
Toutes les leçons 
Apprendre Javascript pour rendre vos pages Web interactives
Leçon 20
Objet Document et DOM en Javascript (Partie 2)
Objet Document et DOM en Javascript (Partie 2)
Création, intégration et suppression des éléments
Jusqu'ici nous avons vu certaines fonctionnalités liées au DOM et qui permettent de modifier un nœud texte ou changer l'apparence d'un objet quelconque. Maintenant nous allons voir comment créer et intégrer un nouveau nœud (objet) à l'arbre HTML et comment supprimer un élément existant.Méthode createElement()
La méthode createElement() permet de créer un nouveau nœud élément (balise).Exemple:
baliseFont=document.createElement("font");
Ici, nous avons créé un nouveau nœud élément qui correspond à la balise <font> (bien que cette balise est devenue obsolète avec HTML5 mais ça reste juste un exemple).
Le nœud désormais créé, est identifié directement par le nom qu'on lui a choisi, à savoir baliseFont.
Le fait de déclarer un nouveau nœud ne veut pas dire qu'il sera visible dans la page, car on ne l'a pas encore intégré à l'arbre HTML.
Méthode createTextNode()
La méthode createTextNode permet de créer un nœud texte.Exemple:
message=document.createTextNode("Bonjour à tous.");
Comme c'est le cas pour la méthode précédente, le texte n'est pas encore intégré au DOM, il n'est donc pas encore considéré sur la page.
Méthode appendChild()
La méthode appendChild ajoute un enfant à l'objet sur lequel elle est appelée. L'enfant peut être un nœud élément ou un nœud texte.Exemple:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<style>
.maclasse{
width:200px;
height:60px;
background-color:#EE6600;
margin:10px;
font:14pt verdana;
padding:10px;
color:#FFFFFF;
}
</style>
<script language="javascript">
function ajouter(){
baliseDIV=document.createElement("div");
baliseDIV.className="maclasse";
message=document.createTextNode("Bonjour à tous.");
baliseDIV.appendChild(message);
document.getElementById("madiv").appendChild(baliseDIV);
}
</script>
</head>
<body onLoad="decoup()">
<input type="button" value="Ajouter une DIV" onClick="ajouter()" />
<div id="madiv"></div>
</body>
</html>
Ce qui donne:
<html>
<head>
<meta charset="UTF-8" />
<style>
.maclasse{
width:200px;
height:60px;
background-color:#EE6600;
margin:10px;
font:14pt verdana;
padding:10px;
color:#FFFFFF;
}
</style>
<script language="javascript">
function ajouter(){
baliseDIV=document.createElement("div");
baliseDIV.className="maclasse";
message=document.createTextNode("Bonjour à tous.");
baliseDIV.appendChild(message);
document.getElementById("madiv").appendChild(baliseDIV);
}
</script>
</head>
<body onLoad="decoup()">
<input type="button" value="Ajouter une DIV" onClick="ajouter()" />
<div id="madiv"></div>
</body>
</html>
Le nœud enfant qui vient d'être ajouté à un parent, est placé à la fin.
Méthode insertBefore()
La méthode insertBefore() ajoute un nouveau nœud enfant dans l'élément parent sur lequel elle est appelé. Si appendChild() ajoute le nœud à la fin, insertBefore quant à elle permet de spécifier avant quel élément on veut insérer le notre.Exemple:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<style>
.maclasse{
width:200px;
height:60px;
background-color:#EE6600;
margin:10px;
font:14pt verdana;
padding:10px;
color:#FFFFFF;
}
</style>
<script language="javascript">
function ajouter(){
baliseDIV=document.createElement("div");
baliseDIV.className="maclasse";
message=document.createTextNode("Bonjour à tous.");
baliseDIV.appendChild(message);
document.getElementById("madiv").insertBefore(baliseDIV,document.getElementById("monimage"));
}
</script>
</head>
<body onLoad="decoup()">
<input type="button" value="Insérer une DIV" onClick="ajouter()" />
<div id="madiv">
<img src="images/footerlogo.png" id="monimage" />
</div>
</body>
</html>
Ce qui donne:
<html>
<head>
<meta charset="UTF-8" />
<style>
.maclasse{
width:200px;
height:60px;
background-color:#EE6600;
margin:10px;
font:14pt verdana;
padding:10px;
color:#FFFFFF;
}
</style>
<script language="javascript">
function ajouter(){
baliseDIV=document.createElement("div");
baliseDIV.className="maclasse";
message=document.createTextNode("Bonjour à tous.");
baliseDIV.appendChild(message);
document.getElementById("madiv").insertBefore(baliseDIV,document.getElementById("monimage"));
}
</script>
</head>
<body onLoad="decoup()">
<input type="button" value="Insérer une DIV" onClick="ajouter()" />
<div id="madiv">
<img src="images/footerlogo.png" id="monimage" />
</div>
</body>
</html>
Méthode removeChild()
La méthode removeChild() supprime l'enfant passé en paramètre du parent sur lequel il est appelée.Exemple:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<script language="javascript">
function supprimer(){
document.body.removeChild(document.getElementById("monimage"));
}
</script>
</head>
<body>
<input type="button" value="Supprimer l'image" onClick="supprimer()" /><br />
<img src="images/footerlogo.png" id="monimage" />
</body>
</html>
Ce qui donne
<html>
<head>
<meta charset="UTF-8" />
<script language="javascript">
function supprimer(){
document.body.removeChild(document.getElementById("monimage"));
}
</script>
</head>
<body>
<input type="button" value="Supprimer l'image" onClick="supprimer()" /><br />
<img src="images/footerlogo.png" id="monimage" />
</body>
</html>
Mot-clé this
Le mot clé this fait référence à l'objet sur lequel il est déclaré. Il permet de simplifier la désignation des objets à travers le DOM. Au lieux de cibler un élément à travers son ID ou ton tagName, this raccourcie visiblement la syntaxe.Supposons que nous disposons d'une image en noir et blanc qui, une fois survolé, laisse place à une l'image en couleur. On peut écrire le code comme ceci:
<script language="javascript">
tabImages=new Array("images/footerlogonb.png","images/footerlogo.png");
function changerImage(indice,image){
image.src=tabImages[indice];
}
</script>
<img src="images/footerlogonb.png" onMouseOver="changerImage(1,this)" onMouseOut="changerImage(0,this)" />
Ce qui donne:
tabImages=new Array("images/footerlogonb.png","images/footerlogo.png");
function changerImage(indice,image){
image.src=tabImages[indice];
}
</script>
<img src="images/footerlogonb.png" onMouseOver="changerImage(1,this)" onMouseOut="changerImage(0,this)" />
Le DOM (Document Object Model) en vidéo (2)
Leçon 20
Objet Document et DOM en Javascript (Partie 2)
Objet Document et DOM en Javascript (Partie 2)
Quiz 
