Qu'est-ce que le DOM HTML ?
Le DOM HTML est un modèle d'objet pour HTML . Il définit :
- Éléments HTML en tant qu'objets
- Propriétés pour tous les éléments HTML
- Méthodes pour tous les éléments HTML
- Événements pour tous les éléments HTML
Le DOM HTML est une API (Interface de Programmation) pour JavaScript :
- JavaScript peut ajouter/modifier/supprimer des éléments HTML
- JavaScript peut ajouter/modifier/supprimer des attributs HTML
- JavaScript peut ajouter/modifier/supprimer des styles CSS
- JavaScript peut réagir aux événements HTML
- JavaScript peut ajouter/modifier/supprimer des événements HTML
Le DOM HTML (Document Object Model)
Lorsqu'une page Web est chargée, le navigateur crée un modèle d' objet de document de la page.
Le modèle HTML DOM est construit comme un arbre d' Objets :
L'arborescence d'objets HTML DOM
Recherche d'éléments HTML
Lorsque vous souhaitez accéder à des éléments HTML avec JavaScript, vous devez d'abord rechercher les éléments.
Il y a plusieurs façons de faire ça:
- Recherche d'éléments HTML par identifiant
- Recherche d'éléments HTML par nom de balise
- Recherche d'éléments HTML par nom de classe
- Recherche d'éléments HTML par des sélecteurs CSS
- Recherche d'éléments HTML par collections d'objets HTML
Recherche d'élément HTML par identifiant
Le moyen le plus simple de trouver un élément HTML dans le DOM consiste à utiliser l'identifiant de l'élément.
Cet exemple trouve l'élément avec id="intro":
Exemple
var myElement = document.getElementById("intro");
Si l'élément est trouvé, la méthode renverra l'élément en tant qu'objet (dans myElement).
Si l'élément n'est pas trouvé, myElement contiendra null.
Recherche d'éléments HTML par nom de balise
Cet exemple trouve tous les éléments <p> :
Exemple
var x = document.getElementsByTagName("p");
Cet exemple trouve l'élément avec id="main", puis trouve tous les éléments <p> à l'intérieur de "main":
Exemple
var x = document.getElementById("main");
var y = x.getElementsByTagName("p");
Recherche d'éléments HTML par nom de classe
Si vous voulez trouver tous les éléments HTML avec le même nom de classe, utilisez getElementsByClassName().
Cet exemple renvoie une liste de tous les éléments avec class="intro".
Exemple
var x = document.getElementsByClassName("intro");
La recherche d'éléments par nom de classe ne fonctionne pas dans Internet Explorer 8 et les versions antérieures.
Recherche d'éléments HTML par des sélecteurs CSS
Si vous voulez trouver tous les éléments HTML qui correspondent à un sélecteur CSS spécifié (id, noms de classe, types, attributs, valeurs des attributs, etc.), utilisez la méthode querySelectorAll().
Cet exemple renvoie une liste de tous les éléments <p> avec class="intro".
Exemple
var x = document.querySelectorAll("p.intro");
La méthode querySelectorAll() ne fonctionne pas dans Internet Explorer 8 et les versions antérieures.
Recherche d'éléments HTML par des collections d'objets HTML
Les collections d'objets HTML sont également accessibles :
Tutoriel HTML DOM
Tutoriel HTMLDOM complet
Ceci a été une courte introduction à HTMLDOM.
Pour un didacticiel HTMLDOM complet, accédez au didacticiel HTMLDOM de W3Schools .