Le DOM HTML
Le fichier HTML sur le disque ne garde que des caractères. Le navigateur en construit un arbre vivant, et cet arbre est le DOM. Sur la vitre de l’arrêt, deux lignes : le titre Market et la note Stand clear. La page ouverte apporte déjà document. new document() lève une erreur, et new Document() est un document vide, pas ce panneau.
Un arbre, pas un arrondi
Sur la page de l’objet Math, un objet partagé rendait un nombre. Ici on n’arrondit pas une largeur et on ne construit pas un instant avec new Date. On descend depuis document : l’élément html, puis head à côté de body, puis le titre à côté de la note. Choisir les éléments par plusieurs chemins, changer le balisage et créer des nœuds vient plus tard. Cette page apprend la forme et lit deux nœuds.
La place de chaque pièce
Chaque ligne est un endroit que l’on peut montrer du doigt. La dernière colonne est la confusion qui envoie ailleurs.
📊 Places sur ce panneau
| Place | Ce que l’on tient | Sur ce panneau | Facile à confondre |
|---|---|---|---|
document |
l’arbre lui-même | l’entrée, sans nom de balise | le prendre pour body |
document.documentElement |
l’élément html | balise HTML |
l’appeler le titre |
document.head |
l’élément head | frère de body | y chercher Market |
document.body |
l’élément body | parent du titre | un nœud texte |
h1#stop |
l’élément du titre | texte Market |
le fichier enregistré sur le disque |
| texte dans le titre | seulement des caractères | le mot Market | un élément qui a un id |
Le titre et la note sont des enfants éléments de body, donc ils sont frères. Le mot Market n’est pas un frère de la note. C’est du texte dans le titre. tagName revient en capitales, donc l’élément html dit HTML. Le nœud document n’a pas de balise et pas d’élément parent.
Trois noms en haut de l’arbre
Ces trois propriétés nomment les éléments extérieurs. Aucune n’est le titre sur la vitre.
console.log(document.documentElement.tagName);
console.log(document.head.tagName);
console.log(document.body.tagName);
Les trois lignes sont HTML, HEAD et BODY. Head et body sont tous deux enfants de l’élément html, donc frères. Market n’est pas dans head. Le titre de l’onglet dans head est une autre chaîne que le titre sur la vitre.
La famille du titre
L’id stop est la poignée de l’élément titre. Son élément parent est body. Le frère élément suivant est la note.
let stop = document.getElementById("stop");
console.log(stop.parentElement.tagName);
console.log(stop.nextElementSibling.id);
La première ligne est BODY. La seconde est note. nextElementSibling saute le saut de ligne et arrive sur le paragraphe. Le frère élément précédent est null, parce qu’aucun élément ne précède le titre dans body.
Le mot et la poignée
Lire l’élément n’est pas lire les caractères.
let stop = document.getElementById("stop");
console.log(stop.textContent);
console.log(stop.id);
La première ligne est Market. La seconde est stop. textContent donne les caractères. id est la poignée. La note dit Stand clear, et cette chaîne n’est pas sur le titre.
D’abord les éléments, puis chaque nœud
children compte seulement les enfants éléments. childNodes compte aussi les nœuds texte, y compris les sauts de ligne du fichier du panneau. Lance ceci sur un body qui ne contient que le titre et la note, pas sur cette page de leçon et pas sur le fichier de lecture plus bas.
console.log(document.body.children.length);
console.log(document.body.childNodes.length);
Avec un saut avant le titre, un entre les deux éléments et un après la note, children.length vaut 2 et childNodes.length vaut 5. Les trois nœuds en plus sont du texte et ne tiennent que de l’espace. Si les deux balises sont sur une seule ligne, ces nœuds texte disparaissent et les deux longueurs se rejoignent.
Un nom qui n’est pas sur le panneau
Demande un id que le fichier n’a jamais écrit.
console.log(document.getElementById("platform"));
console.log(document.getElementById("stop") === null);
La première ligne est null. La seconde est false, parce que stop existe. null veut dire aucun élément, pas un titre vide. Affecter une nouvelle chaîne à textContent change l’arbre vivant dans le navigateur. Le fichier HTML sur le disque dit encore Market.
Une ligne sur la page
Un troisième paragraphe rapporte la balise du parent et le texte du titre. Le script est à la fin de body, une fois ces éléments présents.
<!DOCTYPE html>
<html>
<head>
<title>dom — page</title>
</head>
<body>
<h1 id="stop">Market</h1>
<p id="note">Stand clear</p>
<p id="board">…</p>
<script>
let stop = document.getElementById("stop");
let board = document.getElementById("board");
board.textContent = stop.parentElement.tagName + " / " + stop.textContent;
</script>
</body>
</html>
Le paragraphe affiche BODY / Market. Dans ce fichier, trois éléments sont dans body avant le script, donc la longueur 2 ne lui appartient pas. L’élément script est un autre enfant. La page suivante choisit les éléments par plus d’un chemin.
Vérifier le panneau
- Afficher les trois noms de balises extérieures et attendre HTML, puis HEAD, puis BODY
- Afficher la balise parente du titre et attendre BODY
- Afficher l’id du frère élément suivant et attendre note
- Afficher le texte du titre et attendre Market, puis l’id et attendre stop
- Sur le panneau à deux éléments, attendre une longueur children de 2 et childNodes de 5
- Afficher l’id absent et attendre null, puis la comparaison avec stop et attendre false
- Lire le paragraphe et attendre BODY / Market
Mauvais endroit
La page s’ouvre. L’endroit nommé n’est pas celui du titre.
- Appeler
new document()ou lirenew Document()comme ce panneau - Chercher Market dans
document.head - Traiter le mot Market comme un frère élément de la note
- Lire
children.lengthquand on voulait chaque nœud, sauts de ligne compris - Lire
childNodes.lengthquand on ne voulait que le titre et la note - Lire
nulld’un id absent comme une chaîne vide - Attendre qu’une écriture dans
textContentchange le fichier sur le disque
Garder ceci à part
documentest l’arbre ;documentElementest l’élément htmlheadetbodysont frères sous cet élément html- Le parent du titre est body ; le frère élément suivant est la note
textContentdonne les caractères ;idest la poignéechildrenne compte que les éléments ;childNodesinclut le texte d’espace- Un id absent vaut
null; le fichier enregistré n’est pas l’arbre vivant - La page suivante choisit les éléments par plus d’un id
🧠 Testez Vos Connaissances
Testez Vos Connaissances
Mettez-vous au défi avec ce quiz interactif et voyez à quel point vous comprenez le sujet
📝 Instructions
- Lisez chaque question attentivement
- Sélectionnez la meilleure réponse pour chaque question
- Vous pouvez refaire le quiz autant de fois que vous le souhaitez
- Votre progression sera affichée en haut