Blog ENI : Toute la veille numérique !
-25€ dès 75€ sur les livres en ligne, vidéos... avec le code FUSEE25. J'en profite !
Accès illimité 24h/24 à tous nos livres & vidéos ! 
Découvrez la Bibliothèque Numérique ENI. Cliquez ici
  1. Livres et vidéos
  2. JavaScript pour l'intégrateur web
  3. Exploiter le DOM
Extrait - JavaScript pour l'intégrateur web Créer des sites web dynamiques et interactifs
Extraits du livre
JavaScript pour l'intégrateur web Créer des sites web dynamiques et interactifs
2 avis
Revenir à la page d'achat du livre

Exploiter le DOM

Le Document Object Model

1. Utiliser le DOM

Dans ce chapitre, nous allons aborder le DOM et voir comment accéder aux éléments constitutifs de la page, ceci afin d’utiliser JavaScript pour personnaliser l’affichage et le rendu de la page.

L’objectif de l’utilisation du JavaScript dans ce livre est la personnalisation de l’affichage et du rendu des pages web dans la fenêtre du navigateur. Pour atteindre cet objectif, nous devons connaître tous les constituants d’une page web, avec leurs propriétés, afin de pouvoir les exploiter.

Nous allons atteindre cet objectif avec le Document Object Model, plus connu sous son acronyme, le DOM.

Toutes les notions de base du code JavaScript que nous avons étudiées précédemment et tous les scripts s’exécutent au sein d’une page web. Cette page web, qu’elle soit simple ou très complexe, est toujours constituée d’éléments HTML et de règles CSS. C’est dans ce contexte qu’est exécuté le code JavaScript.

2. La notion de document

Le mot Document dans Document Object Model (DOM) représente le document, c’est-à-dire la page web. Il faut donc que nous sachions comment est constituée la page sur laquelle nous souhaitons intervenir.

Nous avons deux façons de voir une page web. Premièrement, par l’intermédiaire...

Accéder aux éléments de la page web

1. La fenêtre du navigateur

L’exécution de tout le code JavaScript se fait dans le contexte de la fenêtre du navigateur. Cette fenêtre est représentée par l’objet window. L’objet window contient tout ce qui y est inclus, c’est-à-dire tous les éléments constitutifs, tous les nœuds accessibles avec le DOM, ainsi que l’environnement d’exécution du JavaScript.

Souvenez-vous : lorsque nous avons abordé la notion de variable, nous avions évoqué les variables locales, qui n’étaient accessibles que dans les accolades de la fonction où elles sont définies, et les variables globales qui étaient accessibles partout dans le code JavaScript. Sachez donc que les variables globales sont définies comme des propriétés de l’objet window, elles sont en conséquence accessibles partout dans l’objet window, dans la fenêtre et dans l’environnement d’exécution du JavaScript. Notez qu’il n’est pas nécessaire de faire référence à l’objet window quand nous définissons une variable globale. C’est pour cela que vous ne verrez jamais le nom de la variable préfixée par window.

2. Le document

La page web est représentée par le document. Nous avons évoqué cette notion dans une section précédente. Sachez que le document est une propriété de l’objet window. Nous avons donc cette syntaxe pour accéder au document : window.document. Donc, tous les objets de window.document constituent l’arbre hiérarchique du DOM.

Si, dans la console de votre navigateur, vous saisissez window.document, la console va bien afficher tous les éléments, tous les objets constitutifs de la page. Tous ces objets sont les nœuds accessibles via le DOM.

Voici l’exemple avec le fichier HTML simple utilisé précédemment :

images/C03-004.png

Pour déployer la structure de la page HTML dans la console, cliquez sur le triangle basculant de #document, puis faites de même avec les éléments imbriqués.

De même, si vous souhaitez accéder au nœud <body>, vous pouvez saisir document.body, sans qu’il...

Modifier des éléments dans la page web

1. Modifier un attribut HTML dans un élément

Dans ce premier exemple, pour un élément d’une page, nous allons modifier la valeur d’un de ses attributs HTML existants.

Voici l’élément HTML initial :


<h1 id="titre-principal" align="center">Vulputate Sollicitudin Condimentum Bibendum</h1>
 

Cet élément <h1> possède l’attribut align, avec la valeur center. Vous pouvez dire qu’il n’est pas très judicieux d’utiliser des attributs pour effectuer une mise en forme, qu’il vaut mieux utiliser des CSS. C’est parfaitement exact, mais l’objectif est ici de vous montrer l’utilisation d’une méthode du DOM.

Voici son affichage initial :

images/C03-014.png

Notre objectif va être d’appliquer un alignement à droite. La première étape va être de cibler cet élément <h1> par son id. Ensuite, nous allons accéder à l’attribut align, pour en modifier la valeur.

Voici le script inséré dans le fichier HTML :


<script> 
    var titreH1 = document.getElementById('titre-principal') ; 
    titreH1.setAttribute('align','right'); 
</script>
 

Étudions ce code très simple :

  • Nous créons une variable nommée titreH1.

  • Avec le DOM, nous accédons à l’élément HTML dont l’identifiant est titre-principal.

  • Sur l’objet titreH1, nous utilisons la méthode setAttribute()...

Créer des éléments dans la page web

1. La première solution

Pour ce premier exemple, nous allons ajouter de nouveaux éléments HTML dans une page web, avec leur contenu textuel. Nous allons utiliser la méthode createElement(), qui permet de créer un nouvel élément HTML, et la méthode appendChild(), qui permet d’ajouter un nœud enfant à un nœud spécifié. Voici les pages consacrées à ces deux méthodes : https://developer.mozilla.org/fr/docs/Web/API/Document/createElement et https://developer.mozilla.org/fr/docs/Web/API/Node/appendChild

Voici la structure HTML initiale :


<!DOCTYPE html> 
<html> 
    <head> 
        <meta charset="UTF-8"> 
        <title>Mon script</title> 
    </head> 
    <body> 
        <div id="destinations"> 
 
        </div> 
    </body> 
</html>
 

Nous avons une boîte <div> qui possède un identifiant, id="destinations", et qui est vide de tout contenu.

Voici le script inséré dans le fichier HTML, juste avant la balise </body> :


<script> 
    // Création des deux nouveaux éléments 
    var nouvelEnTeteH2 = document.createElement('h2') ; 
    var nouvelleListe = document.createElement('ul') ; 
    // Ajout du texte dans les deux nouveaux éléments 
    nouvelEnTeteH2.innerHTML = "Nouvelles destinations" ; 
    nouvelleListe.innerHTML = "<li>Venise</li><li>Madrid</li><li>Londres</li>"...

D’autres méthodes des nœuds

1. Supprimer un nœud enfant

La méthode removeChild() permet de supprimer un nœud enfant d’un nœud parent. Voici l’URL de la page consacrée à cette méthode : https://developer.mozilla.org/fr/docs/Web/API/Node/removeChild

Voilà la structure simple de cet exemple :


<!DOCTYPE html> 
<html> 
    <head> 
        <meta charset="UTF-8"> 
        <title>Mon script</title> 
    </head> 
    <body id="top"> 
        <h1>Vulputate Sollicitudin Condimentum Bibendum</h1> 
        <p id="para">Donec sed odio dui</p> 
    </body> 
</html>
 
  • L’élément <body> a un identifiant nommé top.

  • Le paragraphe <p> a un identifiant nommé para.

Voici l’affichage initial :

images/C03-027.png

L’objectif est de supprimer le paragraphe <p id="para">.

Ajoutons ce script très simple :


<!DOCTYPE html> 
<html> 
    <head> 
        <meta charset="UTF-8"> 
        <title>Mon script</title> 
    </head> 
    <body id="top"> 
        <h1>Vulputate Sollicitudin Condimentum Bibendum</h1> 
        <p id="para">Donec sed odio dui</p> 
    </body> 
    <script> 
        var parent = document.getElementById('top') ; 
        var paragraphe = document.getElementById('para') ; 
        var supp_para = parent.removeChild(paragraphe) ; 
    </script> 
</html>
 

Il nous faut dans un premier temps identifier le nœud parent du nœud enfant à supprimer. Dans cet exemple, l’élément parent du paragraphe <p id="para"> est l’élément <body id="top">.

  • Pour connaître cet élément parent, nous créons une variable nommée parent qui cible bien...