Skip to content

Modèle DOM

Document Object Model

Définition

Lorsqu'une page Web est chargée (à partir des codes HTML et CSS), le navigateur crée ce que l'on appelle le Document Object Model (DOM) de la page.

Le modèle DOM est construit comme un arbre d’objets.

Le Document Object Model est la structure arborescente associée à tout document HTML. Exemple :

Source de l'image : https://wdi.centralesupelec.fr/appliouaibe/Cours/DOM

Le DOM définit les éléments HTML présents dans la page comme des objets de l'arbre.

Ces objets fournissent une interface entre les éléments de codes HTML/CSS et le langage JavaScript.

Le DOM définit en effet aussi :

  • les propriétés des éléments HTML (exemple : contenu d'un élément);
  • les méthodes des éléments HTML (action que l'on peut avoir sur l'élément, exemples : suppression d'un élément HTML, ajout d'un événement à un élément HTML).

On dit que le DOM est une Application Programming Interface (API) pour JavaScript.

A travers le DOM, JavaScript permet de :

  • ajouter / supprimer / modifier des éléments HTML dans la page ;
  • modifier les attributs des éléments HTML présents dans la page ;
  • ajouter / supprimer / modifier les styles CSS des éléments HTML présents dans la page ;
  • ajouter / supprimer / modifier et réagir à des événements associés à des éléments HTML de la page.

Sélection d'un élément HTML existant

Définition

JavaScript et le DOM permettent de sélectionner un élément de la page HTML à l'aide de plusieurs méthodes.

Sélection par l'identifiant

Définition

On peut sélectionner un élément HTML à l'aide de son identifiant via la méthode getElementById(nom_identifiant) qui retourne l'objet associé à l'élément HTML dont l'identifiant est passé en argument.

Exemple

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
<html>
<head>
    <title>Exemple JS</title>
</head>
<body>
    <h1 id="titre">Titre</h1>
    <script>
        document.getElementById("titre").textContent = "Nouveau titre";
    </script>
</body>
</html>

Ici :

  • document désigne l’ensemble du document de la page web.
  • getElementById(nom_identifiant) est une méthode qui va récupérer le premier élément dont l’id est nom_identifiant.
  • .textContent est une propriété qui permet de remplacer le contenu de l'élément par ce qui suit le signe égal.

Application

Exercice 10

Tester le code précédent.

Expliquer précisément ce que réalise ce code.

Ajouter la ligne <p id="para"></p> (après le titre de niveau h1) au code HTML puis modifier le contenu (en Paragraphe) de ce paragraphe en ajoutant une ligne au code Javascript.

Tester le code.

Exercice en plus : Différence entre innerHTML et textContent

Tester, comprendre et expliquer le code ci-dessous :

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
<html>
<head>
    <title>Exemple JS</title>
</head>
<body>
    <h1 id="titre">Ti<span>A</span>tre</h1>
    <script>
        document.getElementById("titre").innerHTML = "Nouveau <span id=\"azerty\"></span> titre";
        document.getElementById("azerty").innerHTML = "intrus !!!";
    </script>
</body>
</html>

Sélection par la classe

Définition

On peut sélectionner un élément HTML à l'aide de sa classe (class name en anglais) via la méthode getElementsByClassName(nom_classe) qui retourne l'ensemble des éléments HTML associés à la classe passée en argument.

Exemple

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
<html>
<head>
    <title>Exemple JS</title>
</head>
<body>
    <h1 id="titre">Titre</h1>
    <p class="para">Paragraphe 1</p>
    <p class="para">Paragraphe 2</p>
    <p class="para"></p>
    <script>
        document.getElementsByClassName("para")[0].textContent = "Nouveau paragraphe 1";
        document.getElementsByClassName("para")[1].textContent = "Nouveau paragraphe 2";
    </script>
</body>
</html>

Application

Exercice 11

Sans le tester :

  1. Expliquer ce que réalise ce code précédent.
  2. Indiquer, selon vous, ce que signifient [0] et [1] après document.getElementsByClassName("para").
  3. Représenter la page qui sera affichée par le navigateur.
  4. Ajouter une ligne afin de modifier le contenu du dernier paragraphe en Nouveau paragraphe 3.
  5. Tester votre code.

Sélection par le sélecteur

Définition

On peut aussi citer les méthodes de sélection d'un élément HTML par sélecteur.

  • La méthode querySelector(selecteur) qui retourne le premier élément HTML de la page correspondant au sélecteur fourni en argument :

Exemple

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
<html>
<head>
    <title>Exemple JS</title>
</head>
<body>
    <h1 id="titre">Titre</h1>
    <p class="para">Paragraphe 1</p>
    <p class="para">Paragraphe 2</p>
    <script>
        document.querySelector('p').textContent = "Nouveau paragraphe 1";
    </script>
</body>
</html>

Application

Exercice 12

Ajouter une ligne dans le code Javascript afin de modifier le contenu (en Super titre !) du premier élément associé au sélecteur h1.

  • La méthode querySelectorAll(selecteur) retourne l'ensemble des éléments HTML correspondant au sélecteur fourni en argument.

Exemple

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
<html>
<head>
    <title>Exemple JS</title>
</head>
<body>
    <h1 id="titre">Titre</h1>
    <p class="para">Paragraphe 1</p>
    <p class="para">Paragraphe 2</p>
    <script>
        let ensemble_paragraphes = document.querySelectorAll('p');
        ensemble_paragraphes[0].textContent = "Nouveau paragraphe 1";
        ensemble_paragraphes[1].textContent = "Nouveau paragraphe 2";
    </script>
</body>
</html>

Modification d'un élément HTML existant

Définition

Pour modifier, depuis le langage JavaScript, une propriété (contenu, attribut ou propriété de style) d’un élément d'une page HTML / CSS, on utilise les syntaxes génériques suivantes :

  • Modification du contenu (entre les balises) d'un élément : element.textContent = nouveau contenu HTML

  • Modification d'une propriété de style d'un élément : element.style.propriété = nouveau style

  • Modification de la valeur d'un attribut d'un élément : element.attribute = nouvelle valeur

Exemple concret

Soit le code HTML suivant :

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
<!doctype html>

<html lang="fr">

<head>
    <meta charset="utf-8"/>
    <title>Javascript</title>
    <link href="style.css" rel="stylesheet" type="text/css"/>
    <script src="code.js" defer></script>
</head>

<body>
    <div id="id_zone1"></div>
    <div class="class_zone2">Texte 2</div>
    <div class="class_zone2">Texte 3</div>
    <p>Texte 4</p>
    <p>Texte 5</p>
</body>
</html>

Il est possible de sélectionner / modifier un élément à partir de son identifiant :

Code Javascript n°1

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
// Sélection de l'élément associé à l'identifiant "id_zone1"
let elt_zone1 = document.getElementById("id_zone1")

// Nouveau contenu de l'élément associé à l'identifiant "id_zone1"
elt_zone1.textContent = "Texte 1";

// Nouveau style de l'élément associé à l'identifiant "id_zone1"
elt_zone1.style.color = "red";

// Nouvelle valeur de l'attribut de l'élément associé à l'identifiant "id_zone1"
elt_zone1.align = "center";

Il est possible de sélectionner / modifier un élément à partir de sa classe :

Code Javascript n°2

1
2
3
4
5
6
7
8
// Sélection des éléments associés à la classe "class_zone2"
let elt_zone2 = document.getElementsByClassName("class_zone2")

// Parcours des éléments associés à la classe "class_zone2"
for(elt of elt_zone2)
{
    elt.style.color = 'blue';
}

Remarque : Ici la boucle for permet de parcourir l'ensemble des éléments elt présent dans l'objet elt_zone2 dont la classe associée est class_zone2.

Il est possible de sélectionner / modifier un élément à partir du sélecteur :

Code Javascript n°3

1
2
3
4
5
// Sélection du premier élément associé au sélecteur `p`
let elt3 = document.querySelector(`p`);

// Modification du contenu du premier élément associé au sélecteur `p`
elt3.textContent = "Texte 4 modifié";

Code Javascript n°4

1
2
3
4
5
6
7
8
9
// Sélection de tous les éléments associés au sélecteur `p`
let elt4 = document.querySelectorAll("p");

// Parcours des éléments associés à la classe "class_zone2"
for(elt of elt4)
{
    // Modification d'une propriété de style d'un élément associé à la classe "class_zone2"
    elt.style.color = 'green';
}

Application

Exercice 13

Tester les 4 codes Javascript proposés. Faire une capture d'écran de la page Web obtenu dans votre compte-rendu.

Exercice 14

Proposer un code JavaScript permettant d'obtenir le résultat ci-dessous à partir du code HTML fourni ci-dessous.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
<!doctype html>
<html lang="fr">
<head>
    <meta charset="utf-8"/>
    <title>Javascript</title>
    <link href="style.css" rel="stylesheet" type="text/css"/>
    <script src="code.js" defer></script>
</head>

<body>
    <h1 id="id_titre1"></h1>
    <p class="class_paragraphe">Paragraphe 1</p>
    <p class="class_paragraphe">Paragraphe 2</p>
    <h1 id="id_titre2"></h1>
    <p>Paragraphe 3</p>
    <p>Paragraphe 4</p>
    <h1>Voici le troisième titre !</h1>
    <p>Paragraphe 5</p>
    <p class="class_paragraphe">Paragraphe 6</p>
</body>
</html>

Exercice 15

Soit le code suivant :

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
<html>
<head>
    <title>Exemple JS</title>
</head>
<body>
    <h1 id="titre">Titre</h1>
    <ol class="listes">
    </ol>
    <script>
        ...
    </script>
</body>
</html>

Remplir la liste avec le contenu Elément n°1, Elément n°2 etElément n°3 de trois façon :

  1. A la main, dans le code HTML ;
  2. En Javascript sans boucle for (on utilisera l'attribut innerHTML afin de modifier le contenu HTML de l'élément ol) ;
  3. En Javascript, à l'aide d'une boucle for.

Exercice 16

Expliquer, avant de le tester, ce que fait selon vous le code suivant : 

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
<html>
<head>
    <style type="text/css">
        .rouge {
            color: red;
        }
        .vert {
            color: green;
        }
    </style>
</head>
<body>
    <p id="para">bonjour</p>
    <script>
    let objet_para = document.getElementById("para");
    objet_para.classList.add("rouge");
    </script>
</body>
</html>