Guide complet sur le DOM JavaScript

Le Document Object Model (DOM), en français Modèle Objet de Document, est une représentation hiérarchique des éléments HTML/XML d’une page web, qui permet de les manipuler dynamiquement à l’aide de langages de script tels que JavaScript. Il s’agit d’une interface de programmation normalisée par le W3C (World Wide Web Consortium) qui permet aux programmes informatiques et aux scripts d’accéder et de modifier le contenu, la structure et le style des documents HTML et XML.

En JavaScript, le DOM est représenté par une arborescence d’objets où chaque élément HTML est un nœud. Cette arborescence commence par un nœud racine, généralement représenté par l’objet document. À partir de là, les éléments HTML sont organisés en une structure d’arborescence, où chaque élément est un nœud dans l’arbre. Les principaux types de nœuds dans le DOM sont les nœuds élémentaires (éléments HTML), les nœuds texte (contenu texte à l’intérieur des éléments), les nœuds de commentaire et les nœuds d’attribut.

Pour accéder à un élément spécifique du DOM en JavaScript, on peut utiliser différentes méthodes de sélection, telles que getElementById, getElementsByClassName, getElementsByTagName, querySelector, querySelectorAll, etc. Une fois qu’un élément est sélectionné, on peut alors le modifier en accédant à ses propriétés et en modifiant ses attributs, son contenu texte ou en ajoutant/supprimant des nœuds enfants.

Voici un exemple simple d’accès et de modification d’un élément du DOM en JavaScript :

javascriptCopy code
// Sélection de l'élément ayant l'identifiant "monElement"
var element = document.getElementById("monElement");

// Modification du texte de l'élément
element.textContent = "Nouveau texte pour cet élément";

// Ajout d'une classe CSS à l'élément
element.classList.add("nouvelleClasse");

// Modification d'un attribut de l'élément
element.setAttribute("data-info", "Nouvelle information");

Dans cet exemple, getElementById est utilisé pour sélectionner un élément avec l’ID spécifié, puis différentes méthodes sont utilisées pour modifier cet élément, telles que textContent pour modifier le texte, classList.add pour ajouter une classe CSS, et setAttribute pour définir un nouvel attribut sur l’élément.

En résumé, le DOM est essentiel pour la manipulation dynamique des pages web en JavaScript, permettant aux développeurs d’accéder aux éléments HTML et de les modifier en fonction des interactions de l’utilisateur ou des événements du navigateur. C’est un concept fondamental pour le développement web moderne et il est largement utilisé dans la création d’applications web interactives et dynamiques.

Bien sûr, explorons davantage le Document Object Model (DOM) et ses possibilités en JavaScript.

Le DOM représente la structure logique d’une page web en tant qu’arborescence d’objets. Chaque élément de la page, tel que les balises HTML, les attributs, le texte et les commentaires, est représenté par un nœud dans cette arborescence. Les éléments peuvent être imbriqués les uns dans les autres, formant ainsi une structure hiérarchique. Cette structure est dynamique, ce qui signifie qu’elle peut être modifiée à tout moment par des scripts JavaScript.

Voici quelques notions importantes à connaître concernant le DOM :

1. Nœuds DOM :

   • Les nœuds sont les éléments fondamentaux du DOM. Ils peuvent représenter des éléments HTML, des attributs, du texte ou des commentaires.
   • Chaque nœud est un objet JavaScript avec des propriétés et des méthodes qui permettent de le manipuler.
   • Les principaux types de nœuds sont les nœuds élémentaires, les nœuds texte, les nœuds de commentaire et les nœuds d’attribut.

2. Sélection d’éléments :

   • Pour manipuler les éléments de la page, on utilise des méthodes de sélection telles que getElementById, getElementsByClassName, getElementsByTagName, querySelector et querySelectorAll.
   • Ces méthodes permettent de récupérer des références vers des éléments spécifiques du DOM en fonction de différents critères comme l’ID, la classe, le nom de balise ou un sélecteur CSS.

3. Modification du DOM :

   • Une fois qu’un élément est sélectionné, on peut le modifier en accédant à ses propriétés et en utilisant des méthodes pour modifier son contenu, ses attributs, ses classes, etc.
   • Par exemple, on peut utiliser textContent pour modifier le texte d’un élément, setAttribute pour définir un attribut, classList pour gérer les classes CSS, etc.

4. Création et suppression d’éléments :

   • En plus de la modification des éléments existants, on peut également créer de nouveaux éléments et les ajouter au DOM à l’aide de méthodes telles que createElement et appendChild.
   • De même, on peut supprimer des éléments du DOM à l’aide de méthodes telles que removeChild ou en utilisant la propriété parentNode.

5. Événements DOM :

   • Le DOM permet également de gérer les événements, tels que les clics de souris, les pressions de touches, les changements de taille de fenêtre, etc.
   • On peut ajouter des écouteurs d’événements à des éléments spécifiques pour exécuter du code en réponse à ces événements, ce qui rend les pages web interactives et réactives.

En résumé, le DOM est une représentation dynamique et structurée des éléments d’une page web, offrant aux développeurs la possibilité d’accéder, de modifier et de manipuler ces éléments à l’aide de JavaScript. C’est un élément essentiel du développement web moderne, utilisé pour créer des applications web interactives et dynamiques.