JavaScript - Collections de DOM

Bonjour à vous, aspirants programmeurs ! Aujourd'hui, nous allons plonger dans le monde fascinant des Collections de DOM en JavaScript. Ne vous inquiétez pas si vous êtes nouveau dans la programmation - je vais vous guider à travers ce voyage pas à pas, tout comme j'ai fait pour des centaines d'étudiants au fil des ans. Alors, prenez une tasse de café (ou votre boisson favorite) et mettons-nous en route !

L'objet HTMLCollection

Imaginez que vous êtes dans une bibliothèque et que vous voulez trouver tous les livres sur JavaScript. Le bibliothécaire vous donne un chariot spécial contenant tous ces livres. Dans le monde du développement web, ce chariot est comme une HTMLCollection - une collection d'éléments HTML avec lesquels nous pouvons travailler en utilisant JavaScript.

Qu'est-ce qu'une HTMLCollection ?

Une HTMLCollection est un objet similaire à une liste qui représente une collection d'éléments HTML sur une page web. Elle est "vivante", ce qui signifie qu'elle se met à jour automatiquement lorsque le document sous-jacent change.

Regardons un exemple simple :

<div class="book">JavaScript Basics</div>
<div class="book">Advanced JavaScript</div>
<div class="book">DOM Manipulation</div>

<script>
let books = document.getElementsByClassName('book');
console.log(books);
console.log(books.length); // Affiche : 3
</script>

Dans cet exemple, books est une HTMLCollection contenant tous les éléments avec la classe "book". La propriété length nous indique combien d'éléments sont dans la collection.

Accéder aux éléments d'une HTMLCollection

Vous pouvez accéder aux éléments d'une HTMLCollection comme vous le feriez avec un tableau :

console.log(books[0].innerText); // Affiche : "JavaScript Basics"
console.log(books[1].innerText); // Affiche : "Advanced JavaScript"
console.log(books[2].innerText); // Affiche : "DOM Manipulation"

Cependant, souvenez-vous qu'une HTMLCollection n'est pas exactement un tableau. Elle est similaire à un tableau, mais elle n'a pas toutes les méthodes que les tableaux ont.

Parcourir une HTMLCollection

Pour itérer sur tous les éléments d'une HTMLCollection, vous pouvez utiliser une boucle for :

for (let i = 0; i < books.length; i++) {
console.log(books[i].innerText);
}

Ou, si vous préférez une approche plus moderne, vous pouvez convertir la HTMLCollection en tableau et utiliser les méthodes des tableaux :

Array.from(books).forEach(book => {
console.log(book.innerText);
});

Collections de l'objet document et des éléments DOM

Maintenant que nous comprenons HTMLCollection, explorons quelques façons courantes de créer des collections d'éléments DOM.

document.getElementsByTagName()

Cette méthode retourne une HTMLCollection d'éléments avec le nom de balise spécifié.

<p>First paragraph</p>
<p>Second paragraph</p>
<p>Third paragraph</p>

<script>
let paragraphs = document.getElementsByTagName('p');
console.log(paragraphs.length); // Affiche : 3

for (let i = 0; i < paragraphs.length; i++) {
console.log(paragraphs[i].innerText);
}
</script>

document.getElementsByClassName()

Nous avons vu cela avant, mais penchons-nous un peu plus en détail :

<div class="fruit">Apple</div>
<div class="fruit">Banana</div>
<div class="fruit">Orange</div>

<script>
let fruits = document.getElementsByClassName('fruit');
console.log(fruits.length); // Affiche : 3

Array.from(fruits).forEach(fruit => {
console.log(fruit.innerText);
});
</script>

document.querySelectorAll()

Cette méthode puissante retourne une NodeList (similaire à une HTMLCollection) de tous les éléments correspondant à un sélecteur CSS :

<ul>
<li class="item">Item 1</li>
<li class="item">Item 2</li>
<li class="item">Item 3</li>
</ul>

<script>
let items = document.querySelectorAll('ul .item');
console.log(items.length); // Affiche : 3

items.forEach(item => {
console.log(item.innerText);
});
</script>

Notez que contrairement à HTMLCollection, la NodeList retournée par querySelectorAll() n'est pas vivante et a une méthode forEach intégrée.

Comparaison des méthodes de collection

Voici un tableau pratique résumant les méthodes de collection que nous avons discutées :

Méthode	Retourne	Vivante ?	Cas d'utilisation
getElementsByTagName()	HTMLCollection	Oui	Lorsque vous avez besoin d'éléments d'une balise spécifique
getElementsByClassName()	HTMLCollection	Oui	Lorsque vous avez besoin d'éléments avec une classe spécifique
querySelectorAll()	NodeList	Non	Lorsque vous avez besoin d'éléments correspondant à un sélecteur CSS

Souvenez-vous, "vivante" signifie que la collection se met à jour automatiquement lorsque le DOM change.

Conclusion

Et voilà, chers étudiants ! Nous avons fait le voyage à travers le pays des Collections de DOM, de HTMLCollection aux diverses méthodes de collecte d'éléments DOM. Ces outils sont fondamentaux pour manipuler des pages web avec JavaScript, vous permettant de sélectionner et de modifier des éléments avec facilité.

While you practice these concepts, you'll find yourself becoming more comfortable with DOM manipulation. It's like learning to play an instrument – at first, it might seem challenging, but with practice, you'll be creating beautiful web symphonies in no time!

Remember, the key to mastering programming is practice and curiosity. Don't be afraid to experiment with these methods, try out different scenarios, and most importantly, have fun while coding!

Until next time, happy coding!

Credits: Image by storyset