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
course content

Contenu du cours

Maîtrise Avancée de JavaScript

Maîtrise Avancée de JavaScript

1. Classes
Bienvenue dans le CoursDéclaration de ClasseDéfi : Construire une ClasseMéthodes de ClasseDéfi : Ajouter des Méthodes à une ClasseObjet ParamètrePropriétés PrivéesDéfi : Implémentation de Propriétés Privées dans une ClasseAccesseurs et MutateursDéfi : Gestion des Propriétés avec Getters et SettersPropriétés StatiquesMéthodes StatiquesDéfi : Utilisation des Propriétés et Méthodes Statiques dans une ClasseHéritage avec Extends et Utilisation de super()Défi : Héritage de Classe avec Extends et Utilisation de Super
2. Manipulation du DOM
Qu'est-ce Que le DOM?Interroger le DOMDéfi : Interroger le DOMComprendre la Hiérarchie du DOMDéfi : Hiérarchie DOMPropriétés Du DOMTravailler Avec les Attributs des ÉlémentsDéfi : Travailler Avec les Propriétés et Attributs des ÉlémentsAjouter des ÉlémentsSuppression des ÉlémentsDéfi : Ajouter et Supprimer des ÉlémentsModifier les Styles des ÉlémentsDéfi : Modifier les Styles des Éléments
3. Événements et Gestion des Événements
Introduction aux Événements et aux Écouteurs d'ÉvénementsL'Objet ÉvénementDéfi : Événements et Écouteurs d'ÉvénementsPropagation et Délégation d'ÉvénementsDéfi : Propagation et Délégation d'ÉvénementsÉvénements Clavier et SourisGestion des Écouteurs d'Événements
4. JavaScript Asynchrone et APIs
Introduction à JavaScript AsynchroneRappelsPromessesAsync/AwaitTravailler Avec les APIsIntégration Pratique de l'APIDéfi : Travailler Avec l'APITravailler avec des Bibliothèques TiercesDéfi : Travailler Avec des Bibliothèques TiercesGestion de Plusieurs Requêtes Asynchrones

book
Dé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

course content

Contenu du cours

Maîtrise Avancée de JavaScript

Maîtrise Avancée de JavaScript

1. Classes
Bienvenue dans le CoursDéclaration de ClasseDéfi : Construire une ClasseMéthodes de ClasseDéfi : Ajouter des Méthodes à une ClasseObjet ParamètrePropriétés PrivéesDéfi : Implémentation de Propriétés Privées dans une ClasseAccesseurs et MutateursDéfi : Gestion des Propriétés avec Getters et SettersPropriétés StatiquesMéthodes StatiquesDéfi : Utilisation des Propriétés et Méthodes Statiques dans une ClasseHéritage avec Extends et Utilisation de super()Défi : Héritage de Classe avec Extends et Utilisation de Super
2. Manipulation du DOM
Qu'est-ce Que le DOM?Interroger le DOMDéfi : Interroger le DOMComprendre la Hiérarchie du DOMDéfi : Hiérarchie DOMPropriétés Du DOMTravailler Avec les Attributs des ÉlémentsDéfi : Travailler Avec les Propriétés et Attributs des ÉlémentsAjouter des ÉlémentsSuppression des ÉlémentsDéfi : Ajouter et Supprimer des ÉlémentsModifier les Styles des ÉlémentsDéfi : Modifier les Styles des Éléments
3. Événements et Gestion des Événements
Introduction aux Événements et aux Écouteurs d'ÉvénementsL'Objet ÉvénementDéfi : Événements et Écouteurs d'ÉvénementsPropagation et Délégation d'ÉvénementsDéfi : Propagation et Délégation d'ÉvénementsÉvénements Clavier et SourisGestion des Écouteurs d'Événements
4. JavaScript Asynchrone et APIs
Introduction à JavaScript AsynchroneRappelsPromessesAsync/AwaitTravailler Avec les APIsIntégration Pratique de l'APIDéfi : Travailler Avec l'APITravailler avec des Bibliothèques TiercesDéfi : Travailler Avec des Bibliothèques TiercesGestion de Plusieurs Requêtes Asynchrones

book
Dé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
some-alt