Manipulations du DOM

Nous allons manipuler un peu le DOM d'une page web.

  1. Téléchargez le fichier html sur lequel il faudra travailler par la suite
  2. Ajoutez lui un section js en bas de page
  3. Proposez une prévisualisation d'un commentaire sans intervention du serveur

Indices

  1. Accédez au bouton "prévisualiser" en javascript
  2. Accédez aux différents champs du formulaire
  3. Mettez vous à l'écoute de l'événement "onclick", déclenchez une fonction que vous écrirez
  4. Inscrivez le commentaire dans la page, juste avant le formulaire
    • Accédez à l'élément div vide, juste avant le formulaire
    • Écrivez la prévisualisation du commentaire
  5. Après tout son traitement, cette fonction devra renvoyer "false" pour que le formulaire ne soit pas envoyé au serveur

Accédez à des éléments en Javascript

Avec son identifiant HTML
document.getElementById('identifiant');
Des incompatibilités entre navigateurs vous améneront peut-être à utiliser une fonction intermédiaire, qui appellera document.getElementById(id) ou document.all[id] ou document.layers[ id ] suivant le navigateur
Avec sa classe
document.getElementsByTagName('balise')[index];
Notez le "S" à Elements dans le nom de la fonction : celle-ci renvoie un tableau d'objets de type "balise" (fourni en argument)
En parcourant les éléments
document.documentElement.childNodes[3];
Via HowToCreate.co.uk

Voici un exemple de code HTML simple :

<p class="exemple">Contenu <em>important</em></p>

Et voici comment le navigateur web traduit le code en un arbre DOM

                    |P|
                     |
             ________|_______
            |                |
        childNodes       attributes
            |                |
     _______|______     nodeName="class"
    |              |    nodeValue="exemple"
"Contenu"         |em|
                   |
              _____|______
             |            |
         childNodes     attributes
             |
             |
         "important"

Pour accéder à l'élément "em", on peut écrire par exemple : p.childNodes[1]

Voici quelques attributs et méthodes applicables aux éléments accédés de cette manière :
  • Attributs de p.childNodes
    length
    Contient le nombre d'éléments dans le tableau childNodes, très utile pour parcourir tous les enfants d'un élément
  • Attributs de p.childNodes[i]
    nodeName
    Sauvegarde le nom d'un nœud, vaut FORM pour une balise <form> par exemple, et #text pour un nœud textuel.
    nodeValue
    Contient la valeur ou le contenu d'un nœud.
    • pour un nœud texte, cet attribut contient le texte
    • pour un nœud attribut, nodeValue contient la valeur de l'attribut
    • pour un nœud élément, nodeValue==null
  • Méthodes de p.childNodes[i]
    getAttribute("nom_de_l-attribut")
    Renvoie la valeur d'un attribut donné, associé à un élément

Pour en savoir plus, le site selfhtml est très bien fait et exhaustif.

Accéder aux valeurs d'un formulaire

Si vous avez réussi à accéder à l'objet form par une des méthodes précédentes, il est très simple par la suite d'accéder aux différents champs de ce formulaire.

Pour la plupart d'entre eux, il suffit d'accéder à un attribut de cet objet : par exemple, si vous avez un formulaire qui contient <input type="text" name="nom" /> l'objet DOM associé est form.nom tout simplement !

Pour accéder à la valeur entrée par l'utilisateur, il faut utiliser la propriété value. Par exemple form.nom.value="Toto"

Illustration : 
<script type="text/javascript">
/*<![CDATA[*/
document.getElementById('totoEx').bouton.onclick=function(){
                                                       document.getElementById('totoEx').nom.value="toto";
                                                  }
/*]]>*/

Accéder au contenu HTML d'un élément

Une fois qu'on a accédé à un élément, le javascript permet de modifier son contenu grâce à la propriété innerHTML.

Exemple : 
p.innerHTML="Ceci est du texte <strong>important</strong>";
Donne :

Paragraphe d'exemple

Cliquez ici pour voir Annuler

Evênements

Le DOM permet de déclarer des fonctions qui seront lancées lorsque certains événements surviendront

Exemple : 
a.onclick=fonctionAAppeler;
Ou dans le code HTML 
<a href="#" onclick="fonctionAAppeler" >Lien</a>
Événements utiles :