Comprendre comment le navigateur représente la page sous forme d'arbre d'objets, connaître l'objet document, et se déplacer d'un nœud à l'autre (parent, enfants, frères).
La page d'un hammam traditionnel de Fès liste ses soins dans un menu. Pour que JavaScript puisse surligner un soin, afficher son prix ou en ajouter un, il doit savoir où se trouve chaque élément et comment il est relié aux autres. Le navigateur lui fournit pour cela une carte de la page : l'arbre DOM.
Le navigateur a transformé le HTML en arbre : body contient h2, ul et p ; ul contient trois li.
Quand le navigateur charge la page, il lit le HTML et construit en mémoire un arbre d’objets : le DOM (Document Object Model). Chaque balise devient un nœud élément, chaque texte un nœud texte.
JavaScript ne modifie pas le fichier HTML : il modifie cet arbre, et le navigateur redessine la page.
document est la racine de l’arbre. Quelques propriétés :
document.title // le titre de l'onglet
document.body // l'élément <body>
document.head // l'élément <head>
document.documentElement // l'élément <html>
| Propriété | Va vers |
|---|---|
parentElement (parentNode) | le parent |
children | les enfants éléments |
childNodes | tous les nœuds enfants, y compris les textes |
firstElementChild, lastElementChild | le premier, le dernier enfant |
nextElementSibling, previousElementSibling | le frère suivant, précédent |
closest('section') | l’ancêtre le plus proche qui correspond |
const liste = document.getElementById('soins');
liste.children[0].textContent // "Gommage au savon noir"
liste.parentElement // <body>
liste.nextElementSibling.className // "note"
nodeType vaut 1 pour un élément, 3 pour un texte. nodeName (ou tagName) donne le nom de la balise en majuscules : "LI".
Dans une famille, chacun a un parent, peut avoir des enfants et des frères et sœurs. Dans le DOM, chaque balise est un nœud qui a un parent (parentElement), des enfants (children) et des frères (nextElementSibling).
<ul> ← parent <li>Gommage</li> ← enfant, frère du suivant <li>Massage</li> </ul>
Sur le plan, on part de l'entrée et on suit les couloirs. Dans le DOM, on part de document et on descend jusqu'à l'élément voulu.
document.body.firstElementChild // le premier élément du body
Dessinez l'arbre DOM de : <body><header><h1>Fès</h1></header><main><p>Soins</p><p>Prix</p></main></body>
body
├── header
│ └── h1 ("Fès")
└── main
├── p ("Soins")
└── p ("Prix")
Pourquoi liste.childNodes.length vaut-il 7 alors que liste.children.length vaut 3 ?
childNodes contient tous les nœuds, y compris les nœuds texte formés par les retours à la ligne et les espaces entre les <li> (4 nœuds texte + 3 li). children ne contient que les éléments (les balises). On utilise donc children, firstElementChild, nextElementSibling...
À partir d'un <li>, comment trouver la <section> qui le contient, quel que soit le nombre de niveaux ?
const section = li.closest('section'); // closest remonte les ancêtres jusqu'au premier qui correspond au sélecteur