Le document objet DOM HTML est le propriétaire de tous les autres objets dans votre page Web.
L'objet HTML DOM document
L'objet document représente votre page Web.
Si vous souhaitez accéder à un élément dans une page HTML, vous commencez toujours avec accès à l'objet de document.
Voici quelques exemples de la façon dont vous pouvez utiliser l'objet de document pour accéder et manipuler HTML.
Trouver des éléments HTML
| méthode | La description |
|---|---|
| document.getElementById( id ) | Trouver un élément par élément id |
| document.getElementsByTagName( name ) | Trouver des éléments par nom de tag |
| document.getElementsByClassName( name ) | Trouver des éléments par nom de classe |
Modification des éléments HTML
| méthode | La description |
|---|---|
| element .innerHTML = new html content | Modifier le code HTML interne d'un élément |
| element . attribute = new value | Modifiez la valeur de l'attribut d'un élément HTML |
| element .setAttribute (attribute, value) | Modifiez la valeur de l'attribut d'un élément HTML |
| element .style. property = new style | Changer le style d'un élément HTML |
Ajout et Suppression d'éléments
| méthode | La description |
|---|---|
| document.createElement( element ) | Création d'un élément HTML |
| document.removeChild( element ) | Supprimer un élément HTML |
| document.appendChild( element ) | Ajouter un élément HTML |
| document.replaceChild( element ) | Remplacer un élément HTML |
| document.write( text ) | Ecrire dans le flux de sortie HTML |
Ajout d'événements Handlers
| méthode | La description |
|---|---|
| document.getElementById( id ).onclick = function(){ code } | Ajout de code de gestionnaire d'événement à un onclick événement |
Trouver des objets HTML
Le premier HTML DOM Niveau 1 (1998), a défini les objets 11 HTML, les collections d'objets et de propriétés. Ceux-ci sont toujours valables en HTML5.
Plus tard, en HTML DOM niveau 3, plus les objets, les collections et les propriétés ont été ajoutées.
| Propriété | La description | DOM |
|---|---|---|
| document.anchors | Renvoie tous les <a> éléments qui ont un attribut de nom | 1 |
| document.applets | Retourne tous les <applet> éléments (désapprouvées en HTML5) | 1 |
| document.baseURI | Renvoie l'URI de base absolue du document | 3 |
| document.body | Retourne le <body> élément | 1 |
| document.cookie | Retourne le cookie du document | 1 |
| document.doctype | Renvoie le doctype du document | 3 |
| document.documentElement | Retourne le <html> élément | 3 |
| document.documentMode | Renvoie le mode utilisé par le navigateur | 3 |
| document.documentURI | Renvoie l'URI du document | 3 |
| document.domain | Retourne le nom de domaine du serveur de documents | 1 |
| document.domConfig | Obsolète. Retourne la configuration du DOM | 3 |
| document.embeds | Retourne tous <embed> éléments | 3 |
| document.forms | Retourne tous les <form> éléments | 1 |
| document.head | Retourne le <head> élément | 3 |
| document.images | Retourne tous les <img> éléments | 1 |
| document.implementation | Renvoie la mise en œuvre DOM | 3 |
| document.inputEncoding | Renvoie l'encodage du document (jeu de caractères) | 3 |
| document.lastModified | Renvoie l'heure de la date et le document a été mis à jour | 3 |
| document.links | Renvoie tous les <area> et <a> éléments qui ont un attribut href | 1 |
| document.readyState | Retourne le (chargement) statut du document | 3 |
| document.referrer | Renvoie l'URI du referrer (le document de liaison) | 1 |
| document.scripts | Retourne tous <script> éléments | 3 |
| document.strictErrorChecking | Retourne si le contrôle d'erreur est appliquée | 3 |
| document.title | Retourne le <title> élément | 1 |
| document.URL | Renvoie l'URL complète du document | 1 |