JavaScript HTML DOM

Avec le DOM HTML, JavaScript peut accéder et modifier tous les éléments d'un document HTML.

Lorsqu'une page web est chargée, le navigateur crée un D ocument O bject M odel de la page.

Le modèle HTML DOM est construit comme un arbre d' Objets :

DOM HTML tree

Grâce au modèle d'objet, JavaScript obtient tout le pouvoir nécessaire pour créer du HTML dynamique :

  • JavaScript peut changer tous les éléments HTML de la page
  • JavaScript peut changer tous les attributs HTML de la page
  • JavaScript peut changer tous les styles CSS de la page
  • JavaScript peut supprimer les éléments et attributs HTML existants
  • JavaScript peut ajouter de nouveaux éléments et attributs HTML
  • JavaScript peut réagir à tous les événements HTML existants dans la page
  • JavaScript peut créer de nouveaux événements HTML dans la page

Ce que vous allez apprendre

Dans les chapitres suivants de ce tutoriel, vous apprendrez :

  • Comment changer le contenu des éléments HTML
  • Comment changer le style (CSS) des éléments HTML
  • Comment réagir aux événements du DOM HTML
  • Comment ajouter et supprimer des éléments HTML

Qu'est-ce que le DOM ?

Le DOM est une norme W3C (World Wide Web Consortium).

Le DOM définit une norme pour accéder aux documents :

"Le modèle d'objet de document W3C (DOM) est une interface indépendante de la plateforme et du langage qui permet aux programmes et scripts d'accéder et de mettre à jour dynamiquement le contenu, la structure et le style d'un document."

La norme DOM W3C est divisée en 3 parties différentes :

  • DOM de base - modèle standard pour tous les types de documents
  • DOM XML - modèle standard pour les documents XML
  • DOM HTML - modèle standard pour les documents HTML

Qu'est-ce que le DOM HTML ?

Le DOM HTML est un modèle objet standard et une interface de programmation pour HTML. Il définit :

  • Les éléments HTML comme objets
  • Les propriétés de tous les éléments HTML
  • Les méthodes pour accéder à tous les éléments HTML
  • Les événements pour tous les éléments HTML

En d'autres termes : Le DOM HTML est une norme pour obtenir, changer, ajouter ou supprimer des éléments HTML.