JavaScript Academy · Leçon

getElementById et getElementsByClassName

Utilisez les méthodes classiques de sélection.

getElementById et getElementsByClassName est une leçon JavaScript Academy gratuite sur CoddyKit. Ceci est la leçon 2 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.

getElementById

getElementById renvoie l’unique élément dont l’id correspond, ou null. Les identifiants doivent être uniques dans une page, cette méthode renvoie donc un seul élément.

const header = document.getElementById("header");
console.log(header.tagName);

Sans symbole dièse

Contrairement aux sélecteurs CSS, vous devez transmettre l’identifiant brut, sans le #. La transmission de "#header" ne trouverait aucune correspondance.

document.getElementById("menu");   // correct
document.getElementById("#menu");  // wrong, returns null

getElementsByClassName

getElementsByClassName renvoie une HTMLCollection dynamique contenant tous les éléments qui possèdent la classe indiquée.

const cards = document.getElementsByClassName("card");
console.log(cards.length);

Les collections HTML sont dynamiques

La collection se met automatiquement à jour lorsque le DOM change. Si vous ajoutez plus tard un nouvel élément .card, cards.length augmente sans nouvelle recherche.

const cards = document.getElementsByClassName("card");
// later, after appending a new .card element
// cards.length reflects the new total automatically

Indexer une collection

Accédez aux éléments par leur index. Une HTMLCollection ressemble à un tableau, mais ce n’est pas un véritable tableau.

const cards = document.getElementsByClassName("card");
console.log(cards[0].textContent);

Pas de forEach direct

Comme elle ressemble à un tableau sans en être un, une HTMLCollection ne possède pas de forEach. Convertissez-la d’abord ou utilisez une simple boucle for.

const cards = document.getElementsByClassName("card");
for (let i = 0; i < cards.length; i++) {
  console.log(cards[i].textContent);
}

getElementsByTagName

getElementsByTagName renvoie une HTMLCollection dynamique contenant chaque élément portant une balise donnée, par exemple tous les paragraphes.

const paras = document.getElementsByTagName("p");
console.log(paras.length);

Plusieurs classes

Vous pouvez transmettre plusieurs noms de classes séparés par des espaces. Les éléments doivent posséder toutes les classes indiquées pour être inclus.

const items = document.getElementsByClassName("btn primary");

Limiter la recherche à un élément

Ces méthodes existent également sur les éléments, ce qui limite la recherche aux descendants de cet élément.

const list = document.getElementById("todo-list");
const items = list.getElementsByClassName("done");

Convertir en tableau

Pour utiliser des méthodes de tableau comme map ou filter, déployez la collection dans un véritable tableau.

const cards = document.getElementsByClassName("card");
const titles = Array.from(cards).map((c) => c.textContent);

Quand utiliser chaque méthode

Utilisez getElementById pour les recherches rapides d’un élément unique. Préférez querySelectorAll lorsque vous voulez un instantané statique ou des sélecteurs complexes ; utilisez la famille des méthodes commençant par getElementsBy lorsque vous avez spécifiquement besoin d’une collection dynamique.

Vérification rapide

Choisissez le comportement approprié.

Récapitulatif

Vous avez découvert getElementById (un élément recherché par son identifiant brut, sans #), getElementsByClassName et getElementsByTagName (des collections HTML dynamiques). Les collections dynamiques doivent être converties avec Array.from pour utiliser les méthodes de tableau, et elles ne possèdent pas leur propre forEach.

Questions Fréquemment Posées

La leçon « getElementById et getElementsByClassName » est-elle gratuite ?

Oui — le texte complet de « getElementById et getElementsByClassName » 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 « getElementById et getElementsByClassName » ?

Utilisez les méthodes classiques de sélection. 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 2 sur 4.

Combien de temps prend la leçon « getElementById et getElementsByClassName » ?

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

Sélectionner des éléments avec querySelector
getElementById et getElementsByClassName
Parcourir les parents, enfants et frères
NodeList ou HTMLCollection

← Retour à JavaScript Academy