JavaScript - Listes de noeuds DOM

Introduction aux listes de noeuds DOM

Salut à toi, futur développeur web ! Aujourd'hui, nous allons entreprendre un voyage passionnant dans le monde des listes de noeuds DOM de JavaScript. Ne t'inquiète pas si tu es nouveau dans le monde de la programmation - je serai ton guide amical, et nous avancerons pas à pas. D'ici la fin de ce tutoriel, tu manipuleras les pages web comme un pro !

Qu'est-ce qu'une liste de noeuds DOM ?

Avant de plonger dedans, penchons-nous sur les bases. Imagine une page web comme un arbre familial. Le DOM (Document Object Model) est comme cet arbre familial pour les pages web. Chaque élément sur la page - qu'il s'agisse d'un paragraphe, d'un bouton ou d'une image - est un membre de cette famille, ou en termes techniques, un "noeud".

Une liste de noeuds est simplement une collection de ces noeuds. C'est comme avoir une liste d'invités pour une fête, où chaque invité est un élément de ta page web.

Exemple 1 : Obtenir une liste de noeuds

Jetons un coup d'œil à un exemple simple :

<div>
<p>Paragraphe 1</p>
<p>Paragraphe 2</p>
<p>Paragraphe 3</p>
</div>

<script>
let paragraphs = document.querySelectorAll('p');
console.log(paragraphs);
</script>

Dans cet exemple, querySelectorAll('p') renvoie une liste de noeuds contenant tous les éléments <p>. Si tu exécutes ceci dans la console de ton navigateur, tu verras quelque chose comme :

NodeList(3) [p, p, p]

Cela nous indique que nous avons une liste de noeuds contenant trois éléments de paragraphe.

Travailler avec des listes de noeuds

Maintenant que nous avons notre liste de noeuds, voyons ce que nous pouvons en faire !

Exemple 2 : Itérer à travers une liste de noeuds

let paragraphs = document.querySelectorAll('p');

paragraphs.forEach((paragraph, index) => {
console.log(`Paragraphe ${index + 1} : ${paragraph.textContent}`);
});

Ce code affichera :

Paragraphe 1 : Paragraphe 1
Paragraphe 2 : Paragraphe 2
Paragraphe 3 : Paragraphe 3

Ici, nous utilisons la méthode forEach pour itérer à travers chaque paragraphe dans notre liste de noeuds. C'est comme passer notre liste d'invités et saluer chaque invité individuellement !

La magie des listes de noeuds vivantes vs statiques

Maintenant, c'est là que les choses deviennent intéressantes. Les listes de noeuds peuvent être soit "vivantes" soit "statiques".

Une liste de noeuds vivante est comme une liste d'invités magique qui se met à jour lorsque des personnes arrivent ou quittent la fête. À l'inverse, une liste de noeuds statique est comme un instantané de la liste d'invités à un moment précis - elle ne change pas même si de nouveaux invités arrivent.

Exemple 3 : Liste de noeuds vivante

<ul id="guestList">
<li>Alice</li>
<li>Bob</li>
</ul>

<script>
let guests = document.getElementsByTagName('li');
console.log(guests.length); // Outputs: 2

let newGuest = document.createElement('li');
newGuest.textContent = 'Charlie';
document.getElementById('guestList').appendChild(newGuest);

console.log(guests.length); // Outputs: 3
</script>

Dans cet exemple, getElementsByTagName renvoie une liste de noeuds vivante. Lorsque nous ajoutons Charlie à la liste, notre liste de noeuds guests se met automatiquement à jour !

Exemple 4 : Liste de noeuds statique

<ul id="guestList">
<li>Alice</li>
<li>Bob</li>
</ul>

<script>
let guests = document.querySelectorAll('li');
console.log(guests.length); // Outputs: 2

let newGuest = document.createElement('li');
newGuest.textContent = 'Charlie';
document.getElementById('guestList').appendChild(newGuest);

console.log(guests.length); // Still outputs: 2
</script>

Ici, querySelectorAll renvoie une liste de noeuds statique. Même après avoir ajouté Charlie, notre liste de noeuds guests ne change pas. C'est comme si nous avions pris une photo de la liste d'invités et que cette photo ne se met pas à jour lorsque de nouveaux invités arrivent.

La différence entre HTMLCollection et NodeList

Maintenant, parlons de deux cousins dans la famille du DOM : HTMLCollection et NodeList. Ils sont similaires, mais ils ont leurs propres caractéristiques uniques.

HTMLCollection

Une HTMLCollection est toujours vivante. C'est comme une liste d'invités qui se met constamment à jour.

let divs = document.getElementsByTagName('div'); // Renvoie HTMLCollection

NodeList

Une NodeList peut être soit vivante soit statique, selon la manière dont elle est créée.

let paragraphs = document.querySelectorAll('p'); // Renvoie NodeList statique
let childNodes = document.body.childNodes; // Renvoie NodeList vivante

Voici un tableau résumant leurs différences :

Caractéristique	HTMLCollection	NodeList
Vivante/Statique	Toujours vivante	Peut être vivante ou statique
Contenu	Only element nodes	Peut inclure tous les types de noeuds
Accès aux éléments	Par nom, id ou index	Only par index
Méthode forEach	Non disponible	Disponible

Conclusion

Et voilà, les amis ! Nous avons traversé le pays des listes de noeuds DOM, des concepts de base aux nuances des listes vivantes et statiques. Souviens-toi, la pratique rend parfait. Essaye ces exemples, expérimente avec eux, et bientôt tu manipuleras les pages web comme un développeur chevronné !

Avant de nous séparer, voici unpetit joke de développeur web pour toi : Pourquoi le développeur JavaScript portait-il des lunettes ? Parce qu'il ne pouvait pas C#! (Comprends-tu ? C Sharp ? Bon, je me senssortir...)

Continue de coder, continue d'apprendre, et surtout, continue de t'amuser avec JavaScript !

Credits: Image by storyset