TOC

Comment traverser le DOM

introduction

Le didacticiel précédent de cette série, Comment accéder aux éléments dans le DOM, explique comment utiliser le Les méthodes -in de l’objet + document + pour accéder aux éléments HTML par ID, classe, nom de balise et sélecteurs de requête. Nous savons que le DOM est structuré de la manière suivante: tree de noeuds avec le noeud + document + à la racine et tous les autres nœuds (y compris les éléments, les commentaires et les nœuds de texte) en tant que différentes branches.

Souvent, vous souhaiterez parcourir le DOM sans spécifier au préalable chaque élément. Apprendre à naviguer dans l’arborescence DOM et à passer d’une branche à l’autre est essentiel pour comprendre comment utiliser JavaScript et HTML.

Dans ce didacticiel, nous verrons comment traverser le DOM (également appelé marche ou navigation dans le DOM) avec les propriétés parent, enfant et frère.

Installer

Pour commencer, nous allons créer un nouveau fichier nommé + nodes.html + comprenant le code suivant.

nœuds.html

<!DOCTYPE html>
<html>

<head>
 <title>Learning About Nodes</title>

 <style>
   * { border: 2px solid #dedede; padding: 15px; margin: 15px; }
   html { margin: 0; padding: 0; }
   body { max-width: 600px; font-family: sans-serif; color: #333; }
 </style>
</head>

<body>
 <h1>Shark World</h1>
 <p>The world's leading source on <strong>shark</strong> related information.</p>
 <h2>Types of Sharks</h2>
 <ul>
   <li>Hammerhead</li>
   <li>Tiger</li>
   <li>Great White</li>
 </ul>
</body>

<script>
 const h1 = document.getElementsByTagName('h1')[0];
 const p = document.getElementsByTagName('p')[0];
 const ul = document.getElementsByTagName('ul')[0];
</script>

</html>

Lorsque nous chargeons le fichier dans un navigateur Web, un rendu ressemblant à celui de la capture d’écran suivante apparaît.

image: https: //assets.digitalocean.com/articles/eng_javascript/dom/nodes-before-modification.png [noeuds.html page]

Dans cet exemple de site Web, nous avons un document HTML avec quelques éléments. Quelques CSS élémentaires ont été ajoutées dans une balise + style pour rendre chaque élément visible, et quelques variables ont été créées dans le` + script a` pour faciliter l’accès à quelques éléments. Puisqu’il n’y a qu’un seul de chaque + h1 + , + p + et + ul + , nous pouvons accéder au premier index sur chaque propriété + getElementsByTagName + `respective.

Nœuds racines

L’objet + document est la racine de chaque nœud du DOM. Cet objet est en fait une propriété de l’objet + window, qui est l’objet global de niveau supérieur représentant un onglet dans le navigateur. L’objet https://developer.mozilla.org/en-US/docs/Web/API/Window [+ window +] a accès à des informations telles que la barre d’outils, la hauteur et la largeur de la fenêtre, les invites et les alertes. Le + document se compose de ce qui est à l’intérieur de la` + fenêtre` intérieure.

Vous trouverez ci-dessous un tableau contenant les éléments racine que chaque document contiendra. Même si un fichier HTML vierge est chargé dans un navigateur, ces trois nœuds seront ajoutés et analysés dans le DOM.

Property Node Node Type

document

#document

DOCUMENT_NODE

document.documentElement

html

ELEMENT_NODE

document.head

head

ELEMENT_NODE

document.body

body

ELEMENT_NODE

Puisque les éléments + html, '+ head` et` + body + sont si courants, ils ont leurs propres propriétés sur le + document`.

Ouvrez le Console dans DevTools et testez chacune de ces quatre propriétés en les soumettant et en affichant le résultat. Vous pouvez également tester + h1 +, + p + et + ul + qui renverront les éléments en raison des variables que nous avons ajoutées dans la balise + script +.

Nœuds parents

Les nœuds du DOM sont appelés parents, enfants et frères et sœurs, en fonction de leur relation avec les autres nœuds. Le * parent * de n’importe quel nœud est le nœud qui se trouve à un niveau supérieur ou plus proche du + document + dans la hiérarchie DOM. Il existe deux propriétés pour obtenir le parent - + parentNode + et + parentElement +.

Property Gets

parentNode

Parent Node

parentElement

Parent Element Node

Dans notre exemple + nodes.html +:

  • + html est le parent de` + head`, + body et` + script a`.

  • + body + est le parent de + h1 +, '+ h2 + ,' + p + et + + ul + , mais pas + li + , car + li + est à deux niveaux de + body + `.

Nous pouvons tester quel est le parent de notre élément + p + avec la propriété + parentNode +. Cette variable + p + provient de notre déclaration + document.getElementsByTagName ('p') [0] + personnalisée.

p.parentNode;
Output► <body>...</body>

Le parent de + p + est + body +, mais comment pouvons-nous obtenir le grand-parent, qui est deux niveaux plus haut? Nous pouvons le faire en enchaînant les propriétés.

p.parentNode.parentNode;
Output► <html>...</html>

En utilisant + parentNode + deux fois, nous avons récupéré le grand-parent de + p +.

Il existe des propriétés permettant d’extraire le parent d’un nœud, mais une petite différence les sépare, comme le montre l’extrait ci-dessous.

// Assign html object to html variable
const html = document.documentElement;

console.log(html.parentNode); // > #document
console.log(html.parentElement); // > null

Le parent de presque tous les nœuds est un nœud d’élément, car le texte et les commentaires ne peuvent pas être les parents d’autres nœuds. Cependant, le parent de + html est un noeud de document, donc` + parentElement` renvoie + null i. Généralement, + parentNode + est plus couramment utilisé lors de la traversée du DOM.

Noeuds Enfants

Les * enfants * d’un nœud sont les nœuds qui se trouvent un niveau plus bas. Tous les nœuds situés au-delà d’un niveau d’imbrication sont généralement appelés descendants.

Property Gets

childNodes

Child Nodes

firstChild

First Child Node

lastChild

Last Child Node

children

Element Child Nodes

firstElementChild

First Child Element Node

lastElementChild

Last Child Element Node

La propriété + childNodes + renverra une liste en direct de chaque enfant d’un nœud. Vous pouvez vous attendre à ce que l’élément + ul + reçoive trois éléments + li +. Testons ce qu’il récupère.

ul.childNodes;
Output► (7) [text, li, text, li, text, li, text]

En plus des trois éléments + li +, il contient également quatre nœuds de texte. En effet, nous avons écrit notre propre code HTML (il n’a pas été généré par JavaScript) et l’indentation entre les éléments est comptabilisée dans le DOM en tant que nœuds de texte. Ce n’est pas intuitif, car l’onglet Elements de DevTools supprime les nœuds d’espace.

Si nous tentions de modifier la couleur d’arrière-plan du premier nœud enfant à l’aide de la propriété + firstChild +, le système échouait car le premier nœud était du texte.

ul.firstChild.style.background = 'yellow';
OutputUncaught TypeError: Cannot set property 'background' of undefined

Les propriétés + children +, '+ firstElementChild + et + lastElementChild + existent dans ces types de situations pour extraire uniquement les nœuds d’élément. `+ ul.children + renverra uniquement les trois éléments + li +.

En utilisant + firstElementChild +, nous pouvons changer la couleur de fond du premier + li + dans le + ul +.

ul.firstElementChild.style.background = 'yellow';

Lorsque vous exécutez le code ci-dessus, votre page Web sera mise à jour pour modifier la couleur d’arrière-plan.

image: https: //assets.digitalocean.com/articles/eng_javascript/dom/traverse-1.png [firstElementChild.style.background modification]

Lors de la manipulation de base du DOM, comme dans cet exemple, les propriétés spécifiques à l’élément sont extrêmement utiles. Dans les applications Web générées par JavaScript, les propriétés qui sélectionnent tous les nœuds ont plus de chances d’être utilisées, dans la mesure où les nouvelles lignes et l’indentation en espace blanc n’existent pas dans ce cas.

Une boucle https://www.digitalocean.com/community/tutorials/how-to-construct-for-loops-in-javascript#forof-loop [+ pour …​ sur +] peut être utilisée pour parcourir tout + enfants + éléments.

for (let element of ul.children) {
 element.style.background = 'yellow';
}

Maintenant, chaque élément enfant aura un fond jaune.

image: https: //assets.digitalocean.com/articles/eng_javascript/dom/traverse-2.png [modification d’éléments enfants]

Puisque notre élément + p + contient à la fois du texte et des éléments, la propriété + childNodes + est utile pour accéder à ces informations.

for (let element of p.childNodes) {
 console.log(element);
}
Output"The world's leading source on "
<strong>​shark​</strong>​
" related information."

+ childNodes + et + children + ne renvoient pas de tableaux avec toutes les propriétés et méthodes Array, mais ils apparaissent et se comporter de la même manière que les tableaux JavaScript. Vous pouvez accéder aux nœuds par numéro d’index ou trouver la propriété + length.

document.body.children[3].lastElementChild.style.background = 'fuchsia';

Le code ci-dessus trouvera le dernier élément enfant (+ li +) du quatrième élément enfant (+ ul +) de + body + et appliquera un style.

image: https: //assets.digitalocean.com/articles/eng_javascript/dom/traverse-3.png [dernière modification de l’élément enfant]

À l’aide des propriétés parent et enfant, vous pouvez extraire n’importe quel noeud du DOM.

Nœuds frères

Les * frères et soeurs * d’un nœud sont tous les nœuds du même niveau d’arborescence dans le DOM. Les frères et sœurs ne doivent pas nécessairement appartenir au même type de nœud - les nœuds texte, élément et commentaire peuvent tous être frères.

Property Gets

previousSibling

Previous Sibling Node

nextSibling

Next Sibling Node

previousElementSibling

Previous Sibling Element Node

nextElementSibling

Next Sibling Element Node

Les propriétés sœurs fonctionnent de la même manière que les nœuds enfants, en ce sens qu’il existe un ensemble de propriétés permettant de traverser tous les nœuds et un ensemble de propriétés pour les nœuds d’élément uniquement. + previousSibling + et + nextSibling + obtiendront le prochain nœud immédiatement précédant ou suivant le nœud spécifié, et + previousElementSibling + et + nextElementSibling + obtiendront uniquement les nœuds d’élément.

Dans notre exemple + nodes.html +, sélectionnons l’élément central de + ul +.

const tiger = ul.children[1];

Comme nous avons créé notre DOM à partir de rien et non sous la forme d’une application Web JavaScript, nous devrons utiliser les propriétés de l’élément frère pour accéder aux nœuds d’élément précédent et suivant, car il y a un espace dans le DOM.

tiger.nextElementSibling.style.background = 'coral';
tiger.previousElementSibling.style.background = 'aquamarine';

L’exécution de ce code aurait dû appliquer + coral + à l’arrière-plan de + Hammerhead + et + + aquamarine + à l’arrière-plan de + Great White +.

image: https: //assets.digitalocean.com/articles/eng_javascript/dom/traverse-4.png [modification d’élément frère]

Les propriétés des frères et sœurs peuvent être chaînées, tout comme les propriétés parent et nœud.

Conclusion

Dans ce didacticiel, nous avons expliqué comment accéder aux nœuds racine de chaque document HTML et comment parcourir l’arborescence DOM à travers les propriétés parent, enfant et frère.

Avec ce que vous avez appris dans Comment accéder aux éléments dans le DOM et ce tutoriel, vous devriez pouvoir accéder en toute confiance à n’importe quel nœud du DOM de n’importe quel site Web.

Related