Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Apprendre Défi : Hiérarchie DOM | Manipulation du DOM
Maîtrise Avancée de JavaScript

bookDéfi : Hiérarchie DOM

Tâche

Vous avez une simple liste de tâches en HTML. Votre objectif est de naviguer à travers la hiérarchie du DOM en utilisant des propriétés comme parentNode, childNodes, firstChild, lastChild, previousSibling, et nextSibling pour comprendre leur comportement et comment ils accèdent à différents nœuds.

  1. Accéder au nœud parent : L'élément <li> avec l'ID current-task est sélectionné. Accédez à son élément parent <ul>;
  2. Accéder à tous les nœuds enfants : Récupérez tous les nœuds enfants, y compris les nœuds de texte (comme les espaces blancs);
  3. Accéder aux premiers et derniers nœuds enfants :
    • Accédez au premier nœud enfant sur le parent <ul>;
    • Accédez au dernier nœud enfant sur le parent <ul>.
  4. Naviguer vers les nœuds frères :
    • Accédez à son nœud frère précédent sur current-task;
    • Accédez à son nœud frère suivant sur current-task.
index.html

index.html

index.css

index.css

index.js

index.js

copy
  • Utilisez parentNode pour accéder à son parent <ul>.
  • Utilisez childNodes sur le parent <ul> pour récupérer tous les nœuds enfants, y compris les nœuds de texte (comme les espaces blancs);
  • Utilisez firstChild sur le parent <ul> pour accéder au premier nœud enfant;
  • Utilisez lastChild sur le parent <ul> pour accéder au dernier nœud enfant;
  • Utilisez previousSibling sur current-task pour accéder à son nœud frère précédent;
  • Utilisez nextSibling sur current-task pour accéder à son nœud frère suivant.
index.html

index.html

index.css

index.css

index.js

index.js

copy

Tout était clair ?

Comment pouvons-nous l'améliorer ?

Merci pour vos commentaires !

Section 2. Chapitre 5

Demandez à l'IA

expand

Demandez à l'IA

ChatGPT

Posez n'importe quelle question ou essayez l'une des questions suggérées pour commencer notre discussion

Awesome!

Completion rate improved to 2.22

bookDéfi : Hiérarchie DOM

Glissez pour afficher le menu

Tâche

Vous avez une simple liste de tâches en HTML. Votre objectif est de naviguer à travers la hiérarchie du DOM en utilisant des propriétés comme parentNode, childNodes, firstChild, lastChild, previousSibling, et nextSibling pour comprendre leur comportement et comment ils accèdent à différents nœuds.

  1. Accéder au nœud parent : L'élément <li> avec l'ID current-task est sélectionné. Accédez à son élément parent <ul>;
  2. Accéder à tous les nœuds enfants : Récupérez tous les nœuds enfants, y compris les nœuds de texte (comme les espaces blancs);
  3. Accéder aux premiers et derniers nœuds enfants :
    • Accédez au premier nœud enfant sur le parent <ul>;
    • Accédez au dernier nœud enfant sur le parent <ul>.
  4. Naviguer vers les nœuds frères :
    • Accédez à son nœud frère précédent sur current-task;
    • Accédez à son nœud frère suivant sur current-task.
index.html

index.html

index.css

index.css

index.js

index.js

copy
  • Utilisez parentNode pour accéder à son parent <ul>.
  • Utilisez childNodes sur le parent <ul> pour récupérer tous les nœuds enfants, y compris les nœuds de texte (comme les espaces blancs);
  • Utilisez firstChild sur le parent <ul> pour accéder au premier nœud enfant;
  • Utilisez lastChild sur le parent <ul> pour accéder au dernier nœud enfant;
  • Utilisez previousSibling sur current-task pour accéder à son nœud frère précédent;
  • Utilisez nextSibling sur current-task pour accéder à son nœud frère suivant.
index.html

index.html

index.css

index.css

index.js

index.js

copy

Tout était clair ?

Comment pouvons-nous l'améliorer ?

Merci pour vos commentaires !

Section 2. Chapitre 5
some-alt