0Pricing
JavaScript Academy · Leçon

NodeList ou HTMLCollection

Comprenez les différences entre les collections d’éléments.

NodeList ou HTMLCollection est une leçon JavaScript Academy gratuite sur CoddyKit. Ceci est la leçon 4 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage JavaScript Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours JavaScript Academy comprend 4 leçons au total.

Deux types de collections

Les méthodes du DOM renvoient l’un de deux objets semblables à des listes : une NodeList ou une HTMLCollection. Ils se ressemblent, mais présentent des différences importantes.

Origine de NodeList

querySelectorAll et childNodes renvoient des objets NodeList. Celle qui provient de querySelectorAll est statique : il s’agit d’un instantané pris au moment de la recherche.

const items = document.querySelectorAll(".item"); // static NodeList

Origine des collections HTML

getElementsByClassName, getElementsByTagName et la propriété children renvoient des objets HTMLCollection dynamiques.

const items = document.getElementsByClassName("item"); // live HTMLCollection

Statique ou dynamique

Une NodeList statique conserve son contenu d’origine même si le DOM change. Une collection HTML dynamique reflète automatiquement les ajouts et les suppressions.

const liveList = document.getElementsByClassName("item");
const staticList = document.querySelectorAll(".item");
// add a new .item later:
// liveList.length increases, staticList.length does not

Prise en charge de forEach

NodeList possède un forEach intégré. Ce n’est pas le cas de HTMLCollection : vous devez donc la convertir ou utiliser une boucle indexée.

document.querySelectorAll(".item").forEach((el) => {
  console.log(el.textContent);
});

Aucune n’est un véritable tableau

Les deux ressemblent à des tableaux : elles possèdent length et permettent l’accès par index, mais elles ne disposent pas de map, filter ni reduce.

const list = document.querySelectorAll(".item");
// list.map is undefined

Convertir avec Array.from

Array.from transforme l’une ou l’autre collection en véritable tableau et permet ainsi d’utiliser toutes les méthodes de tableau.

const arr = Array.from(document.querySelectorAll(".item"));
const texts = arr.map((el) => el.textContent);

Convertir avec l’opérateur de décomposition

L’opérateur de décomposition constitue une alternative concise qui produit également un véritable tableau.

const arr = [...document.getElementsByClassName("item")];
const visible = arr.filter((el) => !el.hidden);

Piège des boucles sur les listes dynamiques

Supprimer des éléments pendant le parcours d’une collection HTML dynamique décale les index et fait passer certains éléments à la trappe. Convertissez d’abord la collection en tableau pour la parcourir en toute sécurité.

const items = [...document.getElementsByClassName("done")];
items.forEach((el) => el.remove()); // safe

Indexer les deux types de collections

Les deux types prennent en charge l’indexation numérique et length. L’accès de base semble donc identique, même si leur comportement interne diffère.

const a = document.querySelectorAll(".item");
const b = document.getElementsByClassName("item");
console.log(a[0], b[0], a.length, b.length);

Choisir le type approprié

Utilisez querySelectorAll lorsque vous voulez un instantané stable avec forEach intégré. Utilisez les collections dynamiques lorsque vous avez spécifiquement besoin que la liste reste synchronisée avec le DOM.

Vérification rapide

Repérez la différence.

Récapitulatif

NodeList (provenant de querySelectorAll) est statique et possède forEach ; une collection HTML (provenant de getElementsByClassName, getElementsByTagName et des éléments enfants) est dynamique et ne possède pas forEach. Aucune des deux n’est un véritable tableau : utilisez Array.from ou l’opérateur de décomposition pour convertir avant d’utiliser map, filter ou reduce, et pour parcourir la collection en toute sécurité pendant sa modification.

Questions Fréquemment Posées

La leçon « NodeList ou HTMLCollection » est-elle gratuite ?

Oui — le texte complet de « NodeList ou HTMLCollection » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours JavaScript Academy, passe à CoddyKit PRO. Le cours JavaScript Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « NodeList ou HTMLCollection » ?

Comprenez les différences entre les collections d’éléments. Tu pratiques JavaScript Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer JavaScript Academy ?

Aucune expérience préalable n'est requise. JavaScript Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 4 sur 4.

Combien de temps prend la leçon « NodeList ou HTMLCollection » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon JavaScript Academy ?

Oui. Chaque leçon JavaScript Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

  1. Sélectionner des éléments avec querySelector
  2. getElementById et getElementsByClassName
  3. Parcourir les parents, enfants et frères
  4. NodeList ou HTMLCollection
← Retour à JavaScript Academy