Parcourir les parents, enfants et frères
Parcourez l’arbre DOM entre les nœuds associés.
Parcourir les parents, enfants et frères est une leçon JavaScript Academy gratuite sur CoddyKit. Ceci est la leçon 3 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.
Pourquoi parcourir l’arbre
Une fois que vous disposez d’un élément, vous avez souvent besoin d’accéder aux éléments qui lui sont liés : le conteneur qui l’entoure, les éléments qu’il contient ou l’élément situé juste à côté. Les propriétés de parcours du DOM vous permettent de vous déplacer dans l’arbre.
parentElement
parentElement vous donne l’élément qui contient l’élément actuel, ou null au sommet de l’arbre.
const item = document.querySelector(".item");
const container = item.parentElement;
console.log(container.className);Éléments enfants
children est une HTMLCollection dynamique contenant les éléments enfants directs d’un élément ; les nœuds de texte sont exclus.
const list = document.querySelector("ul");
console.log(list.children.length);firstElementChild et lastElementChild
Ces propriétés accèdent directement au premier ou au dernier élément enfant, en ignorant les nœuds de texte et de commentaire.
const list = document.querySelector("ul");
console.log(list.firstElementChild.textContent);
console.log(list.lastElementChild.textContent);nextElementSibling
nextElementSibling renvoie l’élément immédiatement situé après l’élément actuel au sein du même parent.
const current = document.querySelector("li.active");
const after = current.nextElementSibling;previousElementSibling
previousElementSibling se déplace dans l’autre direction. Les deux propriétés renvoient null lorsqu’il n’y a aucun élément frère.
const current = document.querySelector("li.active");
const before = current.previousElementSibling;Propriétés des éléments et des nœuds
Attention : childNodes, nextSibling et parentNode incluent les nœuds de texte, notamment les espaces. Les versions *Element* sont généralement celles dont vous avez besoin.
list.childNodes; // includes whitespace text nodes
list.children; // only elementsclosest
closest parcourt l’arbre vers le haut depuis l’élément actuel et renvoie l’ancêtre le plus proche, ou l’élément lui-même, qui correspond à un sélecteur.
const btn = document.querySelector(".delete");
const row = btn.closest("tr");closest pour la délégation d’événements
closest est idéal lorsqu’un clic se produit sur un élément interne, mais que vous devez récupérer le conteneur extérieur qui le gère.
function onClick(e) {
const card = e.target.closest(".card");
if (card) {
console.log(card.dataset.id);
}
}matches
matches vérifie si l’élément lui-même correspond à un sélecteur et renvoie une valeur booléenne. Cette méthode est pratique avec le parcours de l’arbre.
const el = document.querySelector(".item");
console.log(el.matches(".item.active"));Combiner les parcours
Vous pouvez enchaîner les étapes de parcours pour naviguer dans des structures complexes, par exemple partir d’un bouton, remonter jusqu’à sa row, puis passer à la row suivante.
const next = btn.closest("tr").nextElementSibling;Vérification rapide
Choisissez la propriété correcte.
Récapitulatif
Vous pouvez remonter avec parentElement et closest, accéder aux éléments enfants avec children, firstElementChild et lastElementChild, et vous déplacer latéralement avec nextElementSibling et previousElementSibling. Préférez les propriétés qui ciblent uniquement les éléments afin d’ignorer les nœuds de texte constitués d’espaces.
Apprends JavaScript avec un tuteur IA — gratuit
Écris et exécute du vrai code dans ton navigateur, obtiens de l'aide instantanée d'un tuteur IA disponible 24h/24, et reprends là où tu t'es arrêté sur le web ou dans l'app.
- Cours
- 59
- Leçons
- 200
Questions Fréquemment Posées
La leçon « Parcourir les parents, enfants et frères » est-elle gratuite ?
Oui — le texte complet de « Parcourir les parents, enfants et frères » 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 « Parcourir les parents, enfants et frères » ?
Parcourez l’arbre DOM entre les nœuds associés. 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 3 sur 4.
Combien de temps prend la leçon « Parcourir les parents, enfants et frères » ?
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