• 20 heures
  • Facile

Ce cours est visible gratuitement en ligne.

course.header.alt.is_certifying

J'ai tout compris !

Mis à jour le 05/07/2019

Découvrez le DOM

Connectez-vous ou inscrivez-vous gratuitement pour bénéficier de toutes les fonctionnalités de ce cours !

Allez c'est parti ! Ce premier chapitre va vous permettre de découvrir comment la structure d'une page web est représentée par le navigateur.

Préambule : notre environnement de travail

L'environnement de travail nécessaire pour suivre ce cours est identique à celui du cours Apprenez à coder avec JavaScript.

  • La version la plus récente du navigateur web Mozilla Firefox.

  • L'éditeur de code Brackets avec l'extension Beautify installée.

Sur votre machine, créez un répertoire (un dossier) nomméjavascript-web qui contiendra tous les fichiers liés à ce cours. Vous pouvez le créer à l'emplacement de votre choix : dans votre répertoire personnel, sur le Bureau,  dans votre Dropbox...

Dans ce répertoire, créez un répertoire nomméchapitre_1 qui contiendra les fichiers associés au premier chapitre. Créez ensuite dans ce dossier deux répertoires nommésjs (pour les fichiers JavaScript) ethtml (pour les fichiers HTML).

Introduction au DOM

Vous savez déjà qu'une page web est un document contenant du texte ainsi que des balises qui permettent de structurer ce document, en décrivant des éléments comme des titres, des paragraphes, des liens, etc. Le langage de description d'une page web est le HTML.

Écrivons une première page web basique. Ouvrez l'éditeur Brackets puis allez dans le menu Fichier et choisissez la commande Ouvrir un dossier. Naviguez jusqu'à votre dossierjavascript-webpuis cliquez sur le bouton Ouvrir. Dans la vue arborescente qui s'affiche sur la gauche, cliquez surchapitre_1puis cliquez avec le bouton droit sur le répertoirehtml, et lancez la commande Nouveau fichier. Nommez le nouveau fichiercours.htmlet donnez-lui le contenu ci-dessous.

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>Ma page web</title>
</head>

<body>
    <h1>Ma page web</h1>
    <p>Bonjour, je m'appelle Baptiste.</p>
    <p>J'habite dans la belle ville de <a href="http://www.lyon.fr">Lyon</a>.</p>
</body>

</html>

À présent, lancez le navigateur Firefox et ouvrez la page webcours.html que nous venons de créer (menu Fichier puis Ouvrir un fichier, puis naviguez jusqu'à l'emplacement du fichier). Vous obtenez le résultat ci-dessous.

Pour obtenir ce résultat, le navigateur parcourt le code HTML de la page afin de construire une représentation de sa structure. Ensuite, il utilise cette représentation pour afficher les différents éléments de la page.

Là où les choses deviennent intéressantes, c'est que le navigateur permet d'accéder programmatiquement à la structure de la page qu'il affiche. En écrivant du code, on peut ainsi modifier dynamiquement la page web : ajouter ou retirer des éléments, changer leur style, etc. Tout ou presque devient possible ! Et devinez quel langage on va utiliser pour faire tout ça ? JavaScript, bien sûr. 

Cette représentation de la structure d'une page web offerte par un navigateur et exploitable via JavaScript est appelée DOM, pour Document Object Model. Le DOM définit la structure d'une page et le moyen d'interagir avec elle : il s'agit d'une interface de programmation, ou API (Application Programming Interface).

Au tout début du Web, chaque navigateur utilisait son propre DOM, incompatible avec ceux des concurrents. Imaginez le calvaire des premiers développeurs JavaScript pour écrire du code pouvant fonctionner partout ! Heureusement pour vous, cette période est révolue : le World Wide Web Consortium (W3C) a standardisé les choses et la première version d'un DOM unifié a vu le jour en 1998. À l'heure actuelle, tous les navigateurs récents utilisent un DOM standard.

La structure d'une page web

Une page web n'est rien d'autre qu'un ensemble de balises imbriquées les unes dans les autres. On peut la représenter sous une forme hiérarchisée appelée une arborescence. L'élément <html> en constitue la racine et contient deux éléments :<head> et<body>, qui contiennent eux-mêmes plusieurs sous-éléments.

Voici l'arborescence correspondant à notre page HTML d'exemple.

Chaque entité de l'arborescence est appelée un nœud(node). On distingue deux types de nœuds :

  • Ceux (en bleu) qui correspondent à des éléments HTML, comme <body> ou<p>. Ces nœuds peuvent avoir des sous-nœuds, appelés fils ou enfants(children).

  • Ceux (en rouge) qui correspondent au contenu textuel de la page. Ces nœuds ne peuvent pas avoir de fils.

Le navigateur web permet de visualiser la hiérarchie des éléments d'une page web. Pour les visualiser dans Firefox, affichez les outils de développement en sélectionnant Développement Web puis Outils de développement dans le menu Outils. Cliquez ensuite sur l'onglet Inspecteur : la structure de la page s'affiche sous forme arborescente. Vous pouvez naviguer dans cette structure en "dépliant" les nœuds correspondant aux différentes balises HTML.

Arborescence de la page Web d'exemple dans l'inspecteur Firefox

Premiers pas avec le DOM en JavaScript

Le DOM représente une page web sous la forme d'une hiérarchie d'objets, où chaque objet correspond à un nœud de l'arborescence de la page. Les objets du DOM disposent de propriétés et de méthodes permettant de les manipuler avec JavaScript.

Accéder au DOM avec la variable document

Lorsqu'un programme JavaScript s'exécute dans le contexte d'un navigateur web, il peut accéder à la racine du DOM en utilisant la variable document.

Cette variable est un objet et dispose des propriétésheadetbodyqui permettent d'accéder respectivement aux éléments<head> et<body> de la page.

Avec Brackets, cliquez droit sur le répertoirejs du répertoirechapitre_1 et lancez la commande Nouveau fichier. Enregistrez ce fichier sous le nomcours.jset donnez-lui le contenu suivant.

var h = document.head; // La variable h contient l'objet head du DOM
console.log(h);

var b = document.body; // La variable b contient l'objet body du DOM
console.log(b);

Toujours dans Brackets, modifiez le fichiercours.html pour lui ajouter une balise<script> permettant d'exécuter le fichier JavaScriptcours.js.


    <script src="../js/cours.js"></script>
</body>

</html>

Enregistrez vos modifications puis actualisez l'affichage de la page webcours.html sous Firefox. La console des outils de développement (onglet Console) affiche maintenant deux lignes correspondant aux deux balises !

Découvrir le type d'un nœud

Chaque objet du DOM a une propriéténodeTypequi indique son type. La valeur de cette propriété est document.ELEMENT_NODEpour un nœud "élément" (balise HTML) etdocument.TEXT_NODE pour un nœud textuel.

Tapez le code ci-dessous dans le fichiercours.js.

if (document.body.nodeType === document.ELEMENT_NODE) {
    console.log("Body est un noeud élément");
} else {
    console.log("Body est un noeud textuel");
}

Actualisez l'affichage decours.html dans Firefox. Vous obtenez le résultat suivant.

Comme attendu, l'objet du DOM bodyest un nœud de type élément.

Accéder aux enfants d'un nœud élément

Chaque objet du DOM de type élément possède une propriétéchildNodes. Il s'agit d'une collection ordonnée regroupant tous ses nœuds enfants sous la forme d'objets DOM. On peut utiliser cette collection un peu comme un tableau pour accéder aux différents enfants d'un nœud.

Le code ci-dessous affiche dans la console le premier enfant du nœudbody

// Accès au premier enfant du noeud body
console.log(document.body.childNodes[0]);

Tapez ces deux lignes danscours.js, puis actualisez l'affichage decours.html dans Firefox. Voici le résultat obtenu.

Mais... Ce n'est pas le nœudh1qui apparaît ?

Hé non ! Comme vous pouvez le constater, le tout premier enfant du nœudbodyn'est pas le nœudh1mais un noeud textuel !

Voici l'explication : les espaces entre les balises ainsi que les retours à la ligne dans le code HTML sont considérés par le navigateur comme des nœuds textuels. Ici, le noeudh1n'est donc que le deuxième enfant du nœudbody

On peut le vérifier en modifiant le code pour accéder au deuxième enfant (indice 1).

// Accès au deuxième enfant du noeud body
console.log(document.body.childNodes[1]);

Après actualisation, on obtient bien le nœudh1dans la console du navigateur.

Autrement dit, pour que le nœudh1soit le tout premier enfant debody, il aurait fallu écrire notre page web comme ceci.

<body><h1>Ma page Web</h1><!-- Suite de la page -->

En pratique, il est préférable de ne pas sacrifier la présentation et l'indentation du code HTML, tout en gardant à l'esprit l'existence dans le DOM de ces nœuds "vides".

Parcourir la liste des nœuds enfants

Pour parcourir la liste des nœuds enfants, vous pouvez recourir à une bouclefor, comme dans l'exemple ci-dessous. 

// Affiche les noeuds enfant du noeud body
for (var i = 0; i < document.body.childNodes.length; i++) {
    console.log(document.body.childNodes[i]);
}

On obtient la liste des nœuds enfants du nœudbody.

Accéder au parent d'un nœud

Chaque objet du DOM possède une propriétéparentNodequi renvoie son nœud parent sous la forme d'un objet DOM.

var h1 = document.body.childNodes[1];
console.log(h1.parentNode); // Affiche le noeud body

console.log(document.parentNode); // Affiche null : document n'a aucun noeud parent

En résumé

Voici ce que vous devez retenir de ce chapitre.

  • Une page web est un document structuré contenant à la fois du texte et des balises HTML. Grâce à JavaScript, on peut accéder à la structure d'une page affichée dans un navigateur, et même la modifier.

  • Le DOM, ou Document Object Model, définit de manière standardisée la structure d'une page web et le moyen d'interagir avec elle via JavaScript. Le DOM représente une page web comme une hiérarchie d'objets reflétant sa structure. Chaque objet du DOM correspond à un nœud dans l'arborescence de la page web.

  • La variable JavaScriptdocumentpermet d'accéder à la racine de l'arborescence du DOM et correspond à l'élément<html> de la page.

  • Les objets du DOM disposent de propriétés et de méthodes utilisables avec JavaScript. Parmi ces propriétés, nodeTyperenvoie le type de nœud,childNodes contient une collection de nœuds enfants etparentNoderenvoie le nœud parent.

À vous de jouer !

Voici venu le moment d'appliquer vos nouvelles connaissances ! Ce sera aussi l'occasion de revoir certaines notions de JavaScript.

Affichage d'un nœud enfant (résultat à obtenir)

L'objectif de cet exercice est d'écrire une fonction qui affiche un nœud enfant d'un objet du DOM. La fonction reçoit en paramètre l'objet du DOM et l'indice du nœud enfant qu'elle doit afficher. Les cas d'erreur (indice ou type de nœud incorrect) doivent être gérés.

Créez dans le répertoirechapitre_1/html le fichierenfant.html ayant le contenu suivant.

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>Fonction afficherEnfant</title>
</head>

<body>
    <h1>Un titre</h1>
    <div>Du texte avec <a href="#">un lien</a>.</div>

    <script src="../js/enfant.js"></script>
</body>

</html>

Créez dans le répertoirechapitre_1/js le fichierenfant.js ci-dessous.

/*
 Exercice : afficher l'enfant d'un objet du DOM
*/

// Affiche un enfant d'un objet du DOM
// Le paramètre noeud est l'objet du DOM
// Le paramètre indice est l'indice de l'enfant à afficher
function afficherEnfant(noeud, indice) {
    // TODO : compléter la fonction
}

// Doit afficher le noeud h1
afficherEnfant(document.body, 1);

// Doit afficher l'erreur "Indice incorrect"
// L'indice demandé est négatif
afficherEnfant(document.body, -1);

// Doit afficher l'erreur "Indice incorrect"
// Le noeud body a moins de 9 noeuds enfants
afficherEnfant(document.body, 8);

// Doit afficher l'erreur "Type de noeud incorrect"
// Le premier noeud enfant de body est textuel et n'a donc pas d'enfants
afficherEnfant(document.body.childNodes[0], 0);

Ensuite, complétez la fonctionafficherEnfant() afin d'obtenir le comportement attendu.

Solution

Le code source de la solution est consultable en ligne.‌

Exemple de certificat de réussite
Exemple de certificat de réussite