Python Tutorial
Document DOM JavaScript
L’objet de document HTML DOM est le propriétaire de tous les autres objets de votre page Web.
L’objet de document HTML DOM
L’objet document représente votre page Web.
Si vous souhaitez accéder à n’importe quel élément d’une page HTML, vous commencez toujours par accéder à l’objet document.
Vous trouverez ci-dessous quelques exemples d’utilisation de l’objet document pour accéder au code HTML et le manipuler.
Recherche d’éléments HTML
| Méthode | Description |
|---|---|
| document.getElementById(identifiant) | Trouver un élément par ID d’élément |
| document.getElementsByTagName(nom) | Rechercher des éléments par nom de balise |
| document.getElementsByClassName(nom) | Rechercher des éléments par nom de classe |
Modification des éléments HTML
| Propriété | Description |
|---|---|
| élément.innerHTML = nouveau contenu html | Modifier le HTML interne d’un élément |
| élément.attribut = nouvelle valeur | Modifier la valeur d’attribut d’un élément HTML |
| élément.style.propriété = nouveau style | Changer le style d’un élément HTML |
| Méthode | Description |
| élément.setAttribute(attribut, valeur) | Modifier la valeur d’attribut d’un élément HTML |
Ajout et suppression d’éléments
| Méthode | Description |
|---|---|
| document.createElement(élément) | Créer un élément HTML |
| document.removeChild(élément) | Supprimer un élément HTML |
| document.appendChild(élément) | Ajouter un élément HTML |
| document.replaceChild(nouvelle ancienne) | Remplacer un élément HTML |
| document.écrire(texte) | Écrire dans le flux de sortie HTML |
Ajout de gestionnaires d’événements
| Méthode | Description |
|---|---|
| document.getElementById(identifiant).onclick = fonction(){code} | Ajout de code de gestionnaire d’événements à un événement onclick |
Recherche d’objets HTML
Le premier HTML DOM Level 1 (1998), définissait 11 objets HTML, collections d’objets et propriétés. Celles-ci sont toujours valables en HTML5.
Plus tard, dans HTML DOM niveau 3, d’autres objets, collections et propriétés ont été ajoutés.
| Propriété | Description | DOM |
|---|---|---|
| document.ancres | Renvoie tous les éléments qui ont un attribut name | 1 |
| document.applets | Obsolète | 1 |
| document.baseURI | Renvoie l’URI de base absolue du document | 3 |
| document.body | Renvoie l’élément | 1 |
| document.cookie | Renvoie le cookie du document | 1 |
| document.doctype | Renvoie le doctype du document | 3 |
| document.documentElement | Renvoie l’élément | 3 |
| document.documentMode | Renvoie le mode utilisé par le navigateur | 3 |
| document.documentURI | Renvoie l’URI du document | 3 |
| document.domaine | Renvoie le nom de domaine du serveur de documents | 1 |
| document.domConfig | Obsolète. | 3 |
| document.embeds | Renvoie tous les éléments | 3 |
| document.forms | Renvoie tous les éléments | 1 |
| document.head | Renvoie l’élément | 3 |
| document.images | Renvoie tous les éléments |
1 |
| document.implementation | Renvoie l’implémentation DOM | 3 |
| document.inputEncoding | Renvoie l’encodage du document (jeu de caractères) | 3 |
| document.lastModified | Renvoie la date et l’heure de mise à jour du document | 3 |
| document.links | Renvoie tous les éléments et qui ont un attribut href | 1 |
| document.readyState | Renvoie l’état (de chargement) du document | 3 |
| document.référent | Renvoie l’URI du référent (le document de liaison) | 1 |
| document.scripts | Renvoie tous les éléments
|
