HTML noeuds DOM
Dans le HTML DOM (Document Object Model) , tout est un nœud:
- Le document lui-même est un nœud de document
- Tous les éléments HTML sont des noeuds d'éléments
- Tous les attributs HTML sont des nœuds d'attributs
- Texte à l'intérieur des éléments HTML sont des nœuds de texte
- Les commentaires sont des nœuds de commentaire
L'objet de document
Lorsqu'un document HTML est chargé dans un navigateur Web, il devient un objet de document.
L'objet du document est le nœud racine du document HTML et le "owner" de tous les autres nœuds:
(Nœuds d'élément, les nœuds de texte, d'attributs des noeuds et des noeuds de commentaire).
L'objet document fournit des propriétés et des méthodes pour accéder à tous les objets de nœud, à partir de JavaScript.
Tip: Le document est une partie de l'objet de la fenêtre et est accessible en window.document.
Support du navigateur
| Objet | |||||
|---|---|---|---|---|---|
| Document | Oui | Oui | Oui | Oui | Oui |
L'objet de document est pris en charge dans tous les principaux navigateurs.
Propriétés de l'objet de documents et méthodes
Les propriétés et méthodes suivantes peuvent être utilisées sur des documents HTML:
| Propriété / Méthode | La description |
|---|---|
| document.activeElement | Renvoie l'élément actuellement concentré dans le document |
| document. addEventListener() | Un gestionnaire d'attache événement au document |
| document. adoptNode() | Adopte un nœud d'un autre document |
| document.anchors | Retourne une collection de tous les <a> éléments du document qui ont un attribut name |
| document.applets | Retourne une collection de tous les <applet> éléments dans le document |
| document.baseURI | Renvoie l'URI de base absolue d'un document |
| document.body | Définit ou retourne le corps du document (the <body> element) |
| document. close() | Ferme le flux de sortie précédemment ouvert avec le document. open() |
| document.cookie | Renvoie toutes les paires nom / valeur des cookies dans le document |
| document. createAttribute() | Crée un noeud d'attribut |
| document. createComment() | Crée un nœud de commentaire avec le texte spécifié |
| document. createDocumentFragment() | Crée un nœud DocumentFragment vide |
| document. createElement() | Crée un noeud Element |
| document. createTextNode() | Crée un nœud de texte |
| document.doctype | Renvoie la déclaration de type de document associé au document |
| document.documentElement | Renvoie l'élément document du document (the <html> element) |
| document.documentMode | Renvoie le mode utilisé par le navigateur pour rendre le document |
| document.documentURI | Définit ou retourne l'emplacement du document |
| document.domain | Retourne le nom de domaine du serveur qui a chargé le document |
| document.domConfig | Obsolète. Retourne la configuration DOM du document |
| document.embeds | Retourne une collection de tous les <embed> éléments du document |
| document.forms | Retourne une collection de tous les <form> éléments dans le document |
| document. getElementById() | Renvoie l'élément qui a la ID attribut avec la valeur spécifiée |
| document. getElementsByClassName() | Retourne un NodeList contenant tous les éléments avec le nom de classe spécifié |
| document. getElementsByName() | Retourne un NodeList contenant tous les éléments avec un nom spécifié |
| document. getElementsByTagName() | Retourne un NodeList contenant tous les éléments avec le nom de balise spécifié |
| document. hasFocus() | Renvoie une valeur booléenne indiquant si le document a le focus |
| document.head | Retourne le <head> élément du document |
| document.images | Retourne une collection de tous les <img> éléments dans le document |
| document.implementation | Renvoie l'objet DOMImplementation qui gère ce document |
| document. importNode() | Importe un noeud d'un autre document |
| document.inputEncoding | Renvoie l'encodage, le jeu de caractères utilisé pour le document |
| document.lastModified | Renvoie la date et l'heure de dernière modification |
| document.links | Retourne une collection de tous <a> et <area> éléments du document qui ont un attribut href |
| document. normalize() | Supprime vides nœuds de texte, et se joint à des noeuds adjacents |
| document. normalizeDocument() | Supprime vides nœuds de texte, et se joint à des noeuds adjacents |
| document. open() | Ouvre un flux de sortie HTML pour recueillir la sortie du document. write() |
| document. querySelector() | Renvoie le premier élément qui correspond à un CSS spécifié selector(s) dans le document |
| document. querySelectorAll() | Renvoie un NodeList statique contenant tous les éléments correspondant à un CSS spécifié selector(s) dans le document |
| document.readyState | Retourne le (loading) état du document |
| document.referrer | Renvoie l'URL du document qui a chargé le document en cours |
| document. removeEventListener() | Supprime un gestionnaire d'événements à partir du document (qui a été attaché avec le addEventListener() méthode) |
| document. renameNode() | Renomme le noeud spécifié |
| document.scripts | Retourne une collection de <script> éléments dans le document |
| document.strictErrorChecking | Définit ou retourne si vérification des erreurs est appliquée ou non |
| titre du document | Définit ou retourne le titre du document |
| document.URL | Renvoie l'URL complète du document HTML |
| document. write() | Rédige expressions HTML ou du code JavaScript à un document |
| document. writeln() | Identique à write() , mais ajoute un caractère de nouvelle ligne après chaque instruction |
Attention !!!
Dans le noyau DOM du W3C, l'objet de document hérite de toutes les propriétés et méthodes de l'objet Node.
Un grand nombre de ces propriétés et méthodes n'a pas de sens utilisé sur les documents.
Évitez d' utiliser ces propriétés de l' objet de noeud et méthodes sur les objets de document HTML:
| Propriété / Méthode | Raison pour éviter |
|---|---|
| document.attributes | Les documents n'ont pas les attributs |
| document. hasAttributes() | Les documents n'ont pas les attributs |
| document.nextSibling | Les documents ne sont pas frères et soeurs |
| document.nodeName | Ceci est toujours #document |
| document.nodeType | Ceci est toujours 9 (DOCUMENT_NODE) |
| document.nodeValue | Les documents ne sont pas une valeur de noeud |
| document.ownerDocument | Les documents ne sont pas un document de propriétaire |
| document.ownerElement | Les documents ne sont pas un élément propriétaire |
| document.parentNode | Les documents ne sont pas un nœud parent |
| document.previousSibling | Les documents ne sont pas frères et soeurs |
| document.textContent | Les documents ne disposent pas d'un contenu texte |