Apprendre Javascript pour rendre vos pages Web interactives

Auteur: Mohamed CHINY Durée necessaire pour le cours de Apprendre Javascript pour rendre vos pages Web interactives Niveau recommandé pour le cours de Apprendre Javascript pour rendre vos pages Web interactives Supports vidéo disponibles pour ce cours Exercices de renforcement disponibles pour ce cours Quiz disponible pour ce cours

Page 20: Objet Document et DOM en Javascript (Partie 2)

Toutes les pages

Apprendre Javascript pour rendre vos pages Web interactives

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:
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:
Dans ce cas, les nouveaux nœuds sont insérés avant l'image.

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

L'élément à supprimer peut être un nœud existant déjà ou intégré dynamiquement à l'arbre 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:
Le mot clé this fait référence à l'image, car c'est sur celle-ci qu'il est déclaré et passé en paramètre de la fonction changerImage(). Une autre astuce consiste à placer les chemins des images dans un tableau, ce qui rend le code plus lisible et facilement modifiable.

Le DOM (Document Object Model) en vidéo (2)



Quiz (Pour tester vos connaissances)
  1. Si on veut appliquer la couleur rouge à un texte mis dans la balise <span> dont l'attribut id vaut bSpan, le code suivant est-il correcte?
    document.getElementById("bSpan").setAttribute("style","color:#F00");
Oui
Non
  1. Le code suivant
    document.getElementsByTagName("h1").item(0).className="clh1";
Permet de désigner la balise <h1> qui a l'attribut class dont la valeur est clh1.
Permet d'appliquer la valeur clh1 à l'attribut class de la première balise <h1> du document.
  1. Le fait de créer un élément grâce à la méthode document.createElement() permet d'afficher celui-ci sur le navigateur
Oui
Non
  1. Si on veut ajouter un élément au début d'un parent, utilise-t-on?
la méthode appendChild()
la méthode insertBefore()
  1. Si on veut appliquer le souligné à un texte mis dans la balise <span> dont l'attribut id vaut bSpan, le code suivant est-il correcte?
    document.getElementById("bSpan").style.textDecoration="underline";
Oui
Non