Apprendre Qu'est-ce que le Modèle d'Objet de Document (DOM) ? | Manipulation du DOM pour le Développement Web Interactif

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

Considérez le DOM comme un arbre généalogique. Chaque élément du document est comparable à un membre de la famille, relié par des relations : parents, enfants et frères et sœurs.

Dans le DOM, les éléments, attributs et textes sont appelés nœuds, et ces nœuds sont organisés de manière hiérarchique, tout comme les membres d’une 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. Le HTML fournit la structure statique de la page web, tandis que le DOM est la représentation vivante et dynamique que JavaScript peut manipuler.

Le HTML définit la structure initiale de l’arbre généalogique, indiquant qui est relié à qui, mais il reste statique et ne change pas de lui-même ;
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 :

<!DOCTYPE html>
<html>
  <head>
    <title>My Web Page</title>
  </head>
  <body>
    <h1>Welcome to My Website</h1>
    <p>This is a simple paragraph.</p>
  </body>
</html>

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 enfants. À l'intérieur du body, <h1> et <p> sont des éléments frères.

Cette structure représente la version dynamique et interactive du HTML dans le DOM, où JavaScript peut manipuler les relations entre les nœuds (membres de la famille).

Comment JavaScript interagit avec le DOM

JavaScript peut accéder au DOM et le manipuler afin de modifier l'arbre généalogique en temps réel. Il est possible d'ajouter de nouveaux membres, de supprimer des membres existants ou de modifier leurs informations.

Accès aux membres de la famille : De la même manière qu'il est possible de trouver une personne spécifique dans un arbre généalogique, JavaScript peut accéder à des nœuds individuels dans le DOM à l'aide de méthodes telles que document.getElementById() ou document.querySelector() ;
Modification des informations : Une fois qu'un membre de la famille est accessible, ses détails peuvent être mis à jour. Par exemple, JavaScript peut modifier le contenu textuel ou les attributs d'un élément en utilisant des propriétés comme innerHTML ou textContent ;
Modification des relations : JavaScript peut également ajouter de nouveaux membres à l'arbre ou les supprimer. Cela s'effectue en manipulant la structure du DOM avec des méthodes telles que appendChild() ou removeChild().

Exemple

Considérez ce code HTML :

<p id="greeting">Hello, World!</p>

À l'aide de JavaScript, il est possible de modifier le texte du paragraphe, de la même manière que l’on met à jour le nom d’un membre de la famille :

// Access the family member (DOM element) using its ID
const greetingElement = document.getElementById('greeting');

// Modify the family member's details (DOM content)
greetingElement.textContent = 'Hello, JavaScript!';

Après l’exécution du code JavaScript, l’arborescence familiale (DOM) est mise à jour et le texte du paragraphe passe de « Hello, World! » à « Hello, JavaScript! »

index.html

index.js

index.css

Tout était clair ?

Merci pour vos commentaires !

Section 2. Chapitre 1

Demandez à l'IA

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

Glissez pour afficher le menu