Maîtrise Avancée de JavaScript

Contenu du cours

Maîtrise Avancée de JavaScript

Maîtrise Avancée de JavaScript

1. Classes

Bienvenue dans le Cours Déclaration de Classe Défi : Construire une Classe Méthodes de Classe Défi : Ajouter des Méthodes à une Classe Objet Paramètre Propriétés Privées Défi : Implémentation de Propriétés Privées dans une Classe Accesseurs et Mutateurs Défi : Gestion des Propriétés avec Getters et Setters Propriétés Statiques Méthodes Statiques Défi : Utilisation des Propriétés et Méthodes Statiques dans une Classe Hé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 DOM Défi : Interroger le DOM Comprendre la Hiérarchie du DOM Défi : Hiérarchie DOM Propriétés Du DOM Travailler Avec les Attributs des Éléments Défi : Travailler Avec les Propriétés et Attributs des Éléments Ajouter des Éléments Suppression des Éléments Défi : Ajouter et Supprimer des Éléments Modifier les Styles des Éléments Défi : Modifier les Styles des Éléments

3. Événements et Gestion des Événements

Introduction aux Événements et aux Écouteurs d'Événements L'Objet Événement Défi : Événements et Écouteurs d'Événements Propagation et Délégation d'Événements Défi : Propagation et Délégation d'Événements Événements Clavier et Souris Gestion des Écouteurs d'Événements

4. JavaScript Asynchrone et APIs

Introduction à JavaScript Asynchrone Rappels Promesses Async/Await Travailler Avec les APIs Intégration Pratique de l'API Défi : Travailler Avec l'API Travailler avec des Bibliothèques Tierces Défi : Travailler Avec des Bibliothèques Tierces Gestion de Plusieurs Requêtes Asynchrones

Interroger le DOM

Introduction à l'interrogation du DOM

L'interrogation du DOM implique la sélection et l'accès à des éléments spécifiques dans le document afin que vous puissiez les manipuler ou interagir avec eux. JavaScript fournit plusieurs méthodes pour interroger les éléments, chacune ayant son propre cas d'utilisation et comportement.

GetElementById

getElementById est utilisé pour sélectionner un seul élément par son ID unique. C'est l'une des méthodes les plus couramment utilisées car les ID sont censés être uniques dans le document.
Cas d'utilisation : Idéal pour sélectionner un élément spécifique lorsque vous connaissez son ID.
Retourne : Un seul élément ou null si aucun élément n'est trouvé.

GetElementsByClassName

getElementsByClassName sélectionne les éléments par leur nom de classe et retourne une HTMLCollection dynamique d'éléments.
Cas d'utilisation : Utile lorsque vous devez sélectionner plusieurs éléments avec la même classe.
Retourne : Une HTMLCollection dynamique des éléments correspondants, qui se met à jour si le DOM change.
Limitations : Ne peut pas utiliser directement les méthodes de tableau ; doit être converti en tableau si nécessaire.

GetElementsByTagName

getElementsByTagName sélectionne les éléments par leur nom de balise (par exemple, div, p) et renvoie une HTMLCollection dynamique.
Cas d'utilisation : Idéal pour sélectionner tous les éléments d'un type particulier.
Renvoie : Une HTMLCollection dynamique d'éléments.
Limitations : Non spécifique, car il sélectionne tous les éléments d'une balise donnée dans le contexte.

QuerySelector

querySelector sélectionne le premier élément qui correspond à un sélecteur CSS. Il est polyvalent, vous permettant d'utiliser n'importe quel sélecteur CSS valide pour trouver des éléments.
Cas d'utilisation : Idéal pour sélectionner la première correspondance de n'importe quel sélecteur CSS.
Renvoie : Le premier élément correspondant ou null si aucune correspondance n'est trouvée.

QuerySelectorAll

querySelectorAll séléctionne tous les éléments correspondant à un sélecteur CSS et renvoie une NodeList statique. Contrairement à d'autres méthodes, elle ne se met pas à jour dynamiquement si le DOM change.
Cas d'utilisation : Parfait pour sélectionner plusieurs éléments avec des sélecteurs complexes.
Renvoie : Une NodeList statique d'éléments qui ne se met pas à jour automatiquement.

Différences entre ces méthodes

Types de retour

Collections dynamiques vs. statiques

Sélecteurs CSS

Performance

Exemple Pratique : Validation de Formulaire

Combinons ces méthodes dans un scénario pratique : mettre en évidence les champs de formulaire invalides en utilisant des classes.

index.html

index.css

index.js

La méthode getElementById sélectionne l'élément du formulaire, tandis que querySelectorAll récupère tous les champs d'entrée avec la classe .input-field. Un écouteur d'événement sur l'événement "submit" du formulaire empêche la soumission par défaut et vérifie chaque champ d'entrée. Si un champ est vide, il est mis en évidence avec une bordure rouge, tandis que les champs remplis obtiennent une bordure verte, fournissant un retour visuel immédiat à l'utilisateur.

1. Quelle méthode utiliseriez-vous pour sélectionner un élément par son ID unique ?

2. Si vous souhaitez sélectionner le premier élément avec la classe `box` et obtenir son attribut `id`, quelle méthode utiliseriez-vous ?

3. Dans le code HTML suivant, quelle sera la sortie de `console.log(contentEls.length);` ?

Quelle méthode utiliseriez-vous pour sélectionner un élément par son ID unique ?

Sélectionnez la réponse correcte

querySelectorAll

getElementsByClassName

getElementById

Si vous souhaitez sélectionner le premier élément avec la classe box et obtenir son attribut id, quelle méthode utiliseriez-vous ?

Sélectionnez la réponse correcte

querySelector

querySelectorAll

getElementsByClassName

Dans le code HTML suivant, quelle sera la sortie de console.log(contentEls.length); ?

Sélectionnez la réponse correcte

0

1

2

3

Tout était clair ?

Comment pouvons-nous l'améliorer ?

Merci pour vos commentaires !

Section 2. Chapitre 2

We're sorry to hear that something went wrong. What happened?

some-alt