Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.Apprendre Qu'est-ce Que le 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
Qu'est-ce Que le DOM?

Maintenant que nous avons couvert les classes JavaScript, concentrons-nous sur le Document Object Model (DOM), qui est l'interface qui nous permet de manipuler les pages web. La section suivante explorera comment JavaScript interagit avec le DOM pour créer du contenu dynamique et interactif.

Pensez au DOM comme à un arbre généalogique. Chaque élément du document est comme un membre de la famille, connecté par des relations - parents, enfants et frères et sœurs.

Dans le DOM, les éléments, les attributs et le texte sont appelés nœuds, et ces nœuds sont organisés hiérarchiquement, tout comme les membres de la famille dans un arbre généalogique. Certains nœuds sont des parents avec des enfants, tandis que d'autres sont des frères et sœurs.

La relation entre HTML et le DOM

Lorsqu'un navigateur charge un document HTML, il lit le code HTML et construit un arbre DOM correspondant. HTML fournit la structure statique de la page web, tandis que le DOM est la représentation vivante et dynamique que JavaScript peut manipuler.

  1. HTML définit la structure initiale de l'arbre généalogique de qui est connecté à qui, mais il est statique et ne change pas de lui-même;   
  2. Le DOM est l'arbre généalogique en temps réel, et il peut être modifié. De nouveaux membres (éléments) peuvent être ajoutés ou supprimés, et les relations (parent-enfant, frères et sœurs) peuvent être mises à jour par JavaScript.

Par exemple:

Cet HTML crée un arbre généalogique de base avec un nœud <html> comme parent, et les nœuds <head> et <body> comme ses enfants. Dans le corps, <h1> et <p> sont des frères et sœurs.

Cette structure est la version vivante et interactive du DOM de l'HTML, où JavaScript peut manipuler les relations entre les nœuds (membres de la famille).

Comment JavaScript Interagit avec le DOM

JavaScript peut accéder et manipuler le DOM pour apporter des modifications à l'arbre généalogique en temps réel. Vous pouvez ajouter de nouveaux membres, supprimer ceux existants ou changer leurs informations.

  1. Accéder aux Membres de la Famille : Tout comme vous pouvez trouver une personne spécifique dans un arbre généalogique, JavaScript peut accéder à des nœuds individuels dans le DOM en utilisant des méthodes comme document.getElementById() ou document.querySelector();
  2. Changer les Informations : Une fois qu'un membre de la famille est accédé, ses détails peuvent être mis à jour. Par exemple, JavaScript peut changer le contenu textuel ou les attributs d'un élément en utilisant des propriétés comme innerHTML ou textContent;
  3. Modifier les Relations : JavaScript peut également ajouter de nouveaux membres à l'arbre ou les supprimer. Cela se fait en manipulant la structure du DOM avec des méthodes comme appendChild() ou removeChild().

Exemple

Considérez cet HTML :

En utilisant JavaScript, nous pouvons changer le texte du paragraphe, tout comme mettre à jour le nom d'un membre de la famille :

Après avoir exécuté le code JavaScript, l'arbre généalogique (DOM) est mis à jour, et le texte du paragraphe change de "Hello, World!" à "Hello, JavaScript!"

html

index.html

js

index.js

css

index.css

copy

Tout était clair ?

Comment pouvons-nous l'améliorer ?

Merci pour vos commentaires !

Section 2. Chapitre 1
We're sorry to hear that something went wrong. What happened?
some-alt