Comprendre le DOM est essentiel dans votre carrière de développeur Web. Il faut savoir sélectionner différents éléments dans le DOM, pour pouvoir ensuite lire leur contenu ou les modifier.

Le parcours DOM décrit comment naviguer dans la structure arborescente générée par les documents HTML. Voici un guide complet sur la façon de parcourir le DOM avec JavaScript.

Qu'est-ce que la traversée DOM ?

Le Modèle d'objet de document, ou DOM en abrégé, est une représentation arborescente d'un document HTML. Il fournit une API qui vous permet, en tant que développeur Web, d'interagir avec un site Web à l'aide de JavaScript.

Chaque élément du DOM est appelé un nœud. Ce n'est qu'à travers le DOM que vous pouvez manipuler la structure, le contenu et le style de votre document HTML.

La traversée du DOM (également appelée marche ou navigation dans le DOM) consiste à sélectionner des nœuds dans l'arborescence DOM à partir d'autres nœuds. Vous connaissez probablement déjà plusieurs méthodes pour accéder aux éléments de l'arborescence DOM

instagram viewer
par leur identifiant, leur classe ou leur nom de balise. Vous pouvez utiliser des méthodes comme document.querySelector() et document.getElementById() faire cela.

Il existe d'autres méthodes que vous pouvez utiliser conjointement pour naviguer dans le DOM de manière plus efficace et plus robuste. Comme vous pouvez l'imaginer, il est préférable de rechercher à partir d'un point déjà connu sur une carte plutôt que de faire une recherche complète.

Par exemple, sélectionner un élément enfant à partir de son parent est plus simple et plus efficace que de le rechercher dans l'ensemble de l'arborescence.

Un exemple de document à parcourir

Une fois que vous avez accès à un nœud donné dans l'arborescence DOM, vous pouvez accéder à ses nœuds associés de différentes manières. Vous pouvez vous déplacer vers le bas, vers le haut ou latéralement dans l'arborescence DOM à partir du nœud sélectionné.

La première méthode consiste à rechercher un élément en commençant par un nœud le plus haut (comme le nœud du document) et en se déplaçant vers le bas.

La deuxième façon est l'inverse: vous vous déplacez d'un élément interne vers le haut de l'arbre, à la recherche d'un élément externe. La dernière méthode consiste à rechercher un élément à partir d'un autre élément au même niveau (ce qui signifie que les deux éléments sont frères) dans l'arborescence du document.

Pour illustrer, considérez cet exemple de document HTML :

<!DOCTYPE html>
<html lang="fr">
<diriger>
<meta charset="UTF-8" />
<meta http-equiv="Compatible X-UA" contenu="IE=bord" />
<méta nom="fenêtre" contenu="width=device-width, initial-scale=1.0" />
<titre>Page d'exemple</title>
</head>
<corps>
<principal>
<h1>Titre de ma page</h1>
<p>Belle légende va ici</p>


<classe d'articles="Premier article">
<h2>Liste de fruits étonnants</h2>
<p>Faut manger des fruits</p>


<classe div="emballage-1">
<ul classe="liste de pommes">
<ma classe="pomme">Pommes</li>
<ma classe="orange">Des oranges</li>
<ma classe="avocat">Avocats</li>
<ma classe="raisin">
 Raisins


<ul>
<ma classe="type 1">Gouttes de lune</li>
<li>Sultane</li>
<li>Concorde</li>
<li>Carmin sans pépins</li>
</ul>
</li>
<ma classe="banane">Bananes</li>
</ul>


<classe de bouton="btn-1">Lire la liste complète</button>
</div>
</article>


<classe d'articles="second__article">
<h2>Des endroits incroyables au Kenya</h2>
<p>Doit visiter des endroits au Kenya</p>


<classe div="emballage-2">
<ul classe="liste des lieux">
<li>Massaï Mara</li>
<li>Plage de Diani</li>
<li>Plage de Watamu</li>
<li>Parc national d'Amboseli</li>
<li>Lac Nakuru</li>
</ul>


<classe de bouton="btn-2">Lire la liste complète</button>
</div>
</article>
</main>
</body>
</html>

Traverser le DOM vers le bas

Vous pouvez parcourir le DOM vers le bas en utilisant l'une des deux méthodes. La première est la méthode du sélecteur commun (élément.querySelector ou élément.querySelectorAll). Deuxièmement, vous pouvez utiliser le enfants ou childNodes propriété. Il existe également deux autres propriétés spéciales, à savoir, dernier enfant et premier enfant.

Utilisation des méthodes de sélection

Les méthodes querySelector() vous permettent de rechercher un ou plusieurs éléments correspondant à un sélecteur donné. Par exemple, vous pouvez rechercher le premier élément avec une classe de "premier-article" en utilisant document.querySelector('.premier-article'). Et pour tout récupérer h2 éléments dans le document, vous pouvez utiliser le querySelectorAll méthode: document.querySelectorAll('h2'). Le querySelectorAll la méthode renvoie une liste de nœuds d'éléments correspondants; vous pouvez sélectionner chaque élément en utilisant la notation parenthèse :

constante titres = document.querySelectorAll('h2');
constante firstHeading = en-têtes[0]; // sélection du premier élément h2
constante secondTitre = titres[1]; // sélection du deuxième élément h2

Le principal problème lors de l'utilisation des méthodes de sélecteur est que vous devez utiliser les symboles appropriés, le cas échéant, avant le sélecteur, comme vous le faites dans CSS. Par exemple, ".classname" pour les classes et "#id" pour les identifiants.

N'oubliez pas que le résultat sera un élément HTML, pas seulement le contenu interne de l'élément sélectionné. Pour accéder au contenu, vous pouvez utiliser les nœuds innerHTML propriété:

document.querySelector('.orange').innerHTML

Utilisation des propriétés children ou childNodes

Le enfants La propriété sélectionne tous les éléments enfants qui se trouvent directement sous un élément donné. Voici un exemple de enfants propriété en action:

constante appleList = document.querySelector('.apple-list');
constante pommes = appleList.children; 
console.log (pommes);

Enregistrement pommes à la console affichera un ensemble de tous les éléments de la liste directement sous l'élément avec une classe "apple-list" en tant que collection HTML. Une collection HTML est un objet semblable à un tableau, vous pouvez donc utiliser la notation entre crochets pour sélectionner des éléments, comme avec querySelectorAll.

Contrairement à la enfants propriété, childNodes renvoie tous les nœuds enfants directs (pas seulement les éléments enfants). Si vous n'êtes intéressé que par les éléments enfants, par exemple les éléments de liste uniquement, utilisez le enfants propriété.

Utilisation des propriétés spéciales lastChild et firstChild

Ces deux méthodes ne sont pas aussi robustes que les deux premières. Comme leurs noms l'indiquent, les dernier enfant et premier enfant Les propriétés renvoient les derniers et premiers nœuds enfants d'un élément.

constante appleList = document.querySelector('.apple-list');
constante firstChild = appleList.firstChild ;
constante dernierEnfant = appleList.dernierEnfant ;

Traverser le DOM vers le haut

Vous pouvez naviguer dans le DOM en utilisant le ParentElement (ou parentNode) et le plus proche propriétés.

Utiliser parentElement ou parentNode

Les deux ParentElement ou parentNode Les propriétés vous permettent de sélectionner le nœud parent de l'élément sélectionné au niveau supérieur. La différence critique est que ParentElement ne choisit que le nœud parent qui est un élément. D'autre part, parentNode peut sélectionner un parent, qu'il s'agisse d'un élément ou d'un type de nœud différent.

Dans l'exemple de code ci-dessous, nous utilisons ParentElement pour sélectionner la div avec la classe "wrapper-1" de "apple-list":

constante appleList = document.querySelector('.apple-list');
constante parentDiv = appleList.parentElement; 
console.log (div parent); // affiche l'élément div avec la classe wrapper-1

Utiliser la propriété la plus proche

Le le plus proche La propriété sélectionne le premier élément parent qui correspond à un sélecteur spécifié. Il vous permet de sélectionner plusieurs niveaux au lieu d'un. Par exemple, si nous avons déjà sélectionné le bouton avec la classe "btn-1", nous pouvons sélectionner le principal élément à l'aide de le plus proche propriété comme suit :

constante btn1 = document.querySelector('.btn-1');
const mainEl = btn1.plus proche('principal');
console.log (mainEl); // affiche l'élément principal

Comme querySelector et querySelectorAll, utilisez les sélecteurs appropriés dans le plus proche méthode.

Traverser le DOM Sideways

Il existe deux méthodes pour parcourir le DOM de côté. Vous pouvez utiliser nextElementSibling ou previousElementSibling. Utiliser nextElementSibling pour sélectionner l'élément frère suivant et previousElementSibling pour sélectionner le frère précédent.

constante orange = document.querySelector('.orange');
constante pomme = orange.previousElementSibling ;
constante avocat = orange.nextElementSibling;

Il existe aussi des équivalents nextSibling et previousSibling propriétés qui sélectionnent également tous les types de nœuds, pas seulement les éléments.

Faire plus en chaînant les propriétés et les méthodes de traversée DOM

Toutes les méthodes et propriétés ci-dessus peuvent vous permettre de sélectionner n'importe quel nœud dans le DOM. Cependant, dans certains cas, vous voudrez peut-être d'abord vous déplacer vers le haut, puis vers le bas ou sur le côté. Dans ce cas, l'enchaînement de différentes propriétés s'avérera pratique.