Attache un ou plusieurs ombres portées à la boîte
Comprendre le Document Object Model
Le Document Object Model, ou DOM en abrégé, est un modèle indépendant de la plate-forme et du langage pour représenter les documents HTML ou XML. Il définit la structure logique des documents et la manière dont ils peuvent être accédés et manipulés par un programme d'application.
Dans le DOM, toutes les parties du document, telles que les éléments, les attributs, le texte, etc., sont organisées en une structure hiérarchique semblable à un arbre, semblable à un arbre généalogique dans la vie réelle, composé de parents et d'enfants. Dans la terminologie DOM, ces parties individuelles du document sont appelées noeuds.
Chaque élément d'un document HTML, tel qu'une image, un lien hypertexte, un formulaire, un bouton, un titre, un paragraphe, etc., est représenté par un objet JavaScript dans la hiérarchie DOM, et chaque objet contient des propriétés et des méthodes permettant de décrire et de manipuler ces objets. Par exemple, la propriété style des éléments DOM peut être utilisée pour obtenir ou définir le style en ligne d'un élément.
Nœuds du DOM HTML
JavaScript cours tutorialDans le DOM (Document Object Model) HTML, tout est un nœud:
Le document lui-même est un nœud document
Tous les éléments HTML sont des nœuds element
Tous les attributs HTML sont des nœuds attribut
Les textes dans des éléments HTML sont des nœuds text
Les commentaires sont des nœuds comment
L'objet Document
Lorsqu'un document HTML est chargé dans un navigateur web, il devient un objet document.
L'objet document est le nœud racine du document HTML et il est « parent » de tous les autres nœuds :
(les nœuds element, les nœuds text, les nœuds attribut et les nœuds comment).
L'objet document fournit des propriétés et des méthodes pour accéder à tous ces objets nœud, à partir de JavaScript.
Astuce : Le document fait partie de l'objet window et est accessibles en tant que window.document.
Appui de navigateur
L'objet Document est pris en charge dans tous les principaux navigateurs.
Méthodes et propriétés de l'objet document
Les propriétés et méthodes suivantes peuvent être utilisés sur les documents HTML :
| Propriété / Méthode | Description |
|---|---|
| document.baseURI | Retourne l'URI absolu de base d'un document |
| document.body | Retourne l'élément body du document |
| document.close() | Ferme le flux de sortie précédemment ouvert avec document.open() |
| document.cookie | Retourne toutes les paires nom/valeur de cookies dans le document |
| document.createAttribute() | Crée un nœud attribut |
| document.createComment() | Crée un nœud commentaire avec le texte spécifié |
| document.createDocumentFragment() | Crée un nœud DocumentFragment vide |
| document.createElement() | Crée un nœud element |
| document.createTextNode() | Crée un nœud text |
| document.doctype | Retourne la déclaration de Type associée au Document |
| document.documentElement | Retourne l'élément Document du document (l'élément HTML) |
| document.documentMode | Retourne le mode utilisé par le navigateur pour afficher le document |
| document.documentURI | Définit ou retourne l'URI du document |
| document.domain | Retourne le nom de domaine du serveur qui a chargé le document |
| document.domConfig | Retourne la configuration utilisée lorsque normalizeDocument() est appelé |
| document.forms | Retourne une liste de tout les élément form (formulaire) dans le document |
| document.getElementById() | Retourne l'élément dont l'attribut ID a la valeur spécifiée |
| document.getElementsByName() | Accède à tous les éléments avec un nom donné |
| document.getElementsByTagName() | Retourne une liste contenant tous les éléments avec l'attribut tagname spécifié |
| document.images | Retourne une liste de toutes les images dans le document |
| document.implementation | Retourne l'objet DOMImplementation qui gère ce document |
| document.importNode() | Importe un nœud à partir d'un autre document |
| document.inputEncoding | Retourne le codage, jeu de caractères utilisé pour le document |
| document.lastModified | Retourne la date et l'heure, à laquelle le document a été modifié |
| document.links | Retourne une liste de tous les liens dans le document |
| document.normalize() | Supprime les nœuds de texte vides et rejoint les nœuds adjacents |
| document.normalizeDocument() | Supprime les nœuds de texte vides et rejoint les nœuds adjacents |
| document.open() | Ouvre un flux de sortie HTML pour collecter les sortie de document.Write) |
| document.readyState | Retourne le statut du document |
| document.referrer | Retourne l'URL du document qui a chargé le document actif |
| document.renameNode() | Renomme le nœud spécifié |
| document.strictErrorChecking | Définit ou retourne si la vérification des erreurs est appliquée ou non |
| document.title | Définit ou retourne le titre du document |
| document.URL | Retourne l'URL complète du document |
| document.write() | Écrit les expressions HTML ou code JavaScript dans un document |
| document.writeln() | Identique à write(), mais en ajoutant un caractère de saut de ligne après chaque instruction |
AVERTISSEMENT!!!
Dans le noyau du DOM W3C, l'objet Document hérite toutes les propriétés et méthodes de l'objet nœud.
Bon nombre de ces propriétés et méthodes n'ont aucun sens pour l’objet document.
Et donc il faut évitez d'utiliser certaines propriétés et méthodes de l'objet nœud sur des objets document HTML dont voici la liste:
| Propriété / Méthode | Raison pour quoi éviter |
|---|---|
| document.attributes | Document n’a pas d’attribut |
| document.hasAttributes() | Document n’a pas d’attribut |
| document.nextSibling | Document n’a pas de sibling |
| document.nodeName | C'est toujours #document |
| document.nodeType | C'est toujours 9 (DOCUMENT_NODE) |
| document.nodeValue | Documents n’a pas de valeur de nœud |
| document.ownerDocument | Documents n’a pas de document propriétaire |
| document.ownerElement | Documents n’a pas d’éléments propriétaire |
| document.parentNode | Documents n’a pas de nœud parent |
| document.previousSibling | Document n’a pas de sibling |
| document.textContent | Documents n’a pas de contenu texte |