Comprendre l'arbre DOM, les nœuds parents et enfants

Leçon 1

L'arbre DOM

Avec le DOM, JavaScript peut :

modifier, ajouter ou supprimer les éléments HTML de la page ;
modifier, ajouter ou supprimer les attributs des éléments ;
modifier les styles CSS ;
réagir aux événements (clics, saisies, chargement).

La page de l'exemple du résumé

html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Index</title>
</head>
<body>
  <h1>Ma page web</h1>
  <p>Bonjour, nous sommes les stagiaires de la filière développement digital</p>
  <p>Nous étudions à l'<a href="http://www.ofppt.ma">OFPPT</a></p>
</body>
</html>

L'arbre DOM correspondant

txt

document
 └── html                                  ← racine des éléments
      ├── head
      │    ├── meta
      │    └── title
      │         └── "Index"                 ← nœud texte
      └── body
           ├── h1
           │    └── "Ma page web"
           ├── p
           │    └── "Bonjour, nous sommes les stagiaires…"
           └── p
                ├── "Nous étudions à l'"
                └── a  (href="http://www.ofppt.ma")
                     └── "OFPPT"

Vidéo · À regarder

JavaScript Full Course for free

Bro Code · YouTube

Regarde de 8:09:26 à 8:14:265 min

Ouvrir sur YouTube à 8:09:26

Vidéo · À regarder

JavaScript DOM Manipulation – Full Course for Beginners

freeCodeCamp.org · YouTube

Regarde de 1:32 à 4:012 min 29 s

Ouvrir sur YouTube à 1:32

Leçon 2

L'objet document

Méthode	Renvoie
`document.getElementById(id)`	l'élément dont l'attribut `id` vaut `id` (ou `null`)
`document.getElementsByTagName(nom)`	une collection des éléments de cette balise
`document.getElementsByClassName(classe)`	une collection des éléments ayant cette classe
`document.querySelector(sélecteur)`	le premier élément qui correspond au sélecteur CSS (chapitre 9)
`document.querySelectorAll(sélecteur)`

Leçon 3

Naviguer dans le DOM

Type	`nodeType`	`nodeName`	Exemple
élément (une balise)	`1` (`Node.ELEMENT_NODE`)	le nom de la balise en majuscules : `"H1"`, `"P"`	`<p>`
texte	`3` (`Node.TEXT_NODE`)	`"#text"`	le texte d'un paragraphe, et les retours à la ligne entre les balises
commentaire

Travaux pratiques

L'explorateur de nœuds

Exercices

Exercice 8.1

Choisis la bonne réponse

1Le DOM représente la page sous forme…
2La racine du DOM est…
3Le nodeName d'un nœud texte est…
4Pour obtenir les enfants éléments seulement :
5element.nextElementSibling renvoie…
6getElementsByClassName renvoie…

0/6 répondues

Exercice 8.2

Dessine l'arbre

Exercice 8.3

Prédis l'affichage

L'essentiel du chapitre

À retenir

Le DOM est l'arbre des nœuds de la page ; document en est la racine.
document.head, document.body, document.title, document.documentElement.
Recherche : getElementById (un élément), getElementsByTagName et getElementsByClassName (collections), querySelector et querySelectorAll.
Nœuds éléments (nodeType 1) et texte (nodeType 3, #text) ; les retours à la ligne sont des nœuds texte.
Navigation : parentElement, children, firstElementChild, lastElementChild, nextElementSibling, previousElementSibling (versions sans « Element » : nœuds texte compris).

Méthode	Rôle
`document.createElement(balise)`	crée un nouvel élément (non attaché à la page)
`parent.appendChild(enfant)`	ajoute un enfant à la fin d'un élément
`parent.removeChild(enfant)`	supprime un enfant
`parent.replaceChild(nouveau, ancien)`	remplace un enfant par un autre
`element.onclick = function () { ... }`	ajoute un événement de clic (Partie 4)

Propriété	Rôle
`element.innerHTML`	lit ou remplace le contenu HTML de l'élément
`element.textContent`	lit ou remplace le texte seul, sans balises
`element.id`, `element.href`, `element.src`…	lit ou modifie un attribut
`element.style.propriete`	lit ou modifie un style CSS en ligne
`element.classList`	la liste des classes de l'élément (chapitre 10)

Piège classique

Les espaces et retours à la ligne sont des nœuds texte

Dans ce code, div contient cinq nœuds enfants, pas deux : un nœud texte (le retour à la ligne et l'indentation avant <h1>), h1, un nœud texte, p, un nœud texte.

html

<div id="parent">
  <h1>Un titre</h1>
  <p>Un paragraphe</p>
</div>

C'est pour cela que firstChild renvoie souvent #text au lieu de la première balise. Les propriétés en Element (firstElementChild, children…) ignorent ces nœuds texte : ce sont elles qu'on utilise dans 95 % des cas.

Direction	Tous les nœuds (texte compris)	Éléments seulement (recommandé)
vers le parent	`parentNode`	`parentElement`
vers les enfants	`childNodes`	`children`
premier enfant	`firstChild`	`firstElementChild`
dernier enfant	`lastChild`	`lastElementChild`
frère suivant	`nextSibling`	`nextElementSibling`
frère précédent	`previousSibling`	`previousElementSibling`

Accéder au head et au body

const h = document.head;      // l'élément <head>
const b = document.body;      // l'élément <body>
console.log(document.title);  // le titre de l'onglet : "Index"
console.log(document.documentElement);   // l'élément <html>

const ul = document.querySelector("ul");
console.log(ul.children.length);
console.log(ul.firstElementChild.textContent);
console.log(ul.lastElementChild.firstElementChild.nodeName);
console.log(ul.previousElementSibling.textContent);
console.log(ul.nextElementSibling.nodeName);
console.log(ul.parentElement.nodeName);

L'exemple du résumé

html

<h1 id="p1" class="c1">cours DOM JS</h1>
<p class="c1">1er paragraphe</p>
<p class="c2">2ème paragraphe</p>
<script>
  const e1 = document.getElementById("p1");             // <h1 id="p1" class="c1">
  const e2 = document.getElementsByTagName("p");        // HTMLCollection(2) [p.c1, p.c2]
  const e3 = document.getElementsByClassName("c1");     // HTMLCollection(2) [h1#p1.c1, p.c1]
  console.log(e1, e2.length, e3[1].textContent);        // ... 2 "1er paragraphe"
</script>

Naviguer à partir du h1

html

<div id="parent">
  <h1 id="id1">Un titre</h1>
  <p id="id2">Un paragraphe</p>
  <a href="#">Un lien</a>
</div>
<script>
  const parent = document.getElementById("parent");
  const titre = document.getElementById("id1");

  console.log(parent.firstChild.nodeName);           // #text (le retour à la ligne)
  console.log(parent.firstElementChild.nodeName);    // H1
  console.log(parent.lastElementChild.nodeName);     // A
  console.log(parent.childNodes.length);             // 7 (3 éléments + 4 nœuds texte)
  console.log(parent.children.length);               // 3

  console.log(titre.parentNode.id);                  // parent
  console.log(titre.nextSibling.nodeName);           // #text
  console.log(titre.nextElementSibling.nodeName);    // P
  console.log(document.getElementById("id2").previousElementSibling.textContent);   // Un titre

  for (const enfant of parent.children) {            // parcourir les éléments enfants
    console.log(enfant.nodeName + " - " + enfant.textContent);
  }
</script>