Objet DOM HTML
Nœud HTML DOM
Dans HTML DOM (Document Object Model), chaque élément est un Nœud :
-
Un document est un document.
Tous les éléments HTML sont des nœuds d'éléments.
Tous les attributs HTML sont des nœuds d'attribut.
Le texte inséré dans les éléments HTML est un nœud de texte. sont des nœuds de texte.
Les commentaires sont des nœuds de commentaires.
Objet document
Lorsque le navigateur charge un document HTML, celui-ci devient un objet document.
L'objet document est le nœud racine du document HTML et tous les autres nœuds (nœuds d'élément, nœuds de texte, nœuds d'attribut, nœuds de commentaire).
L'objet Document nous permet d'accéder à tous les éléments d'une page HTML à partir de scripts.
Astuce : L'objet Document fait partie de l'objet Window et est accessible via la propriété window.document.
Prise en charge des navigateurs
Tous les principaux navigateurs prennent en charge l'objet Document.
Propriétés et méthodes des objets document
Les propriétés et méthodes ci-dessus peuvent être utilisées dans les documents HTML :
| Propriétés/Méthodes | Description |
|---|---|
| document.activeElement | Renvoie l'élément actuellement ciblé |
| document.addEventListener() | Ajouter un handle au document |
| document.adoptNode(node) | De Un autre document renvoie les nœuds adaptés au document actuel. |
| document.anchors | Renvoie les références à tous les objets Anchor du document. |
| document.applets | Renvoie les références à tous les objets Applet du document. |
| document.baseURI | Renvoie l'URI de base absolue du document |
| document.body | Renvoie le document L'élément body |
| document.close() | ferme le flux de sortie ouvert avec la méthode document.open() et affiche les données sélectionnées. |
| document.cookie | Définir ou renvoyer tous les cookies liés au document actuel. |
| document.createAttribute() | Créer un nœud d'attribut |
| document.createComment() | La méthode createComment() crée un nœud de commentaire. |
| document.createDocumentFragment() | Crée un objet DocumentFragment vide et renvoie cet objet. |
| document.createElement() | Créez un nœud d'élément. |
| document.createTextNode() | Créez un nœud de texte. |
| document.doctype | Renvoie la déclaration de type de document (DTD) associée au document. |
| document.documentElement | Renvoie le nœud racine du document |
| document.documentMode | Retours le nœud racine du mode de rendu des documents via le navigateur |
| document.documentURI | Définit ou renvoie l'emplacement du document |
| document.domain | Renvoie le nom de domaine du document actuel. |
| document.domConfig | Renvoie la configuration utilisée lorsque normalizeDocument() est appelée |
| document.embeds | Renvoie une collection de tout le contenu incorporé (embeds) dans le document |
| document.forms | Renvoie les références à tous les objets Form du document. |
| document.getElementsByClassName() | Renvoie une collection de tous les éléments avec le nom de classe spécifié dans le document en tant qu'objet NodeList. |
| document.getElementById() | Renvoie une référence au premier objet avec l'identifiant spécifié. |
| document.getElementsByName() | Renvoie une collection d'objets avec le nom spécifié. |
| document.getElementsByTagName() | Renvoie une collection d'objets avec le nom de balise spécifié. |
| document.images | Renvoie les références à tous les objets Image du document. |
| document.implementation | Renvoie l'objet DOMImplementation qui gère ce document. |
| document.importNode() | Copiez un nœud d'un autre document vers ce document pour application. |
| document.inputEncoding | Renvoie l'encodage utilisé pour le document (lors de l'analyse). |
| document.lastModified | Renvoie la date et l'heure auxquelles le document a été modifié pour la dernière fois. |
| document.links | Renvoie les références à tous les objets Area et Link du document. |
| document.normalize() | Supprimez les nœuds de texte vides et connectez les nœuds adjacents |
| document.normalizeDocument() | Supprimez les nœuds de texte vides et connectez les nœuds adjacents |
| document.open() | Ouvre un flux à collecter à partir de n'importe quel document La sortie de l'écriture. () ou la méthode document.writeln(). |
| document.querySelector() | Renvoie le premier élément du document qui correspond au sélecteur CSS spécifié |
| document. querySelectorAll() | document.querySelectorAll() est une nouvelle méthode introduite dans HTML5, qui renvoie une liste de tous les nœuds d'éléments qui correspondent au sélecteur CSS dans le document |
| document.readyState | Renvoie l'état du document (chargement...) |
| document.referrer | Renvoie l'URL du document chargeant le document en cours . |
| document.removeEventListener() | Supprimer le gestionnaire d'événements dans le document (ajouté par la méthode addEventListener()) |
| document.renameNode() | Renommer un élément ou un nœud d'attribut. |
| document.scripts | Renvoie une collection de tous les scripts de la page. |
| document.strictErrorChecking | Définir ou renvoyer s'il faut forcer la vérification des erreurs. |
| document.title | Renvoie le titre du document actuel. |
| document.URL | Renvoie l'URL complète du document |
| document.write() | aux documents sont écrits sous forme d'expressions HTML ou de code JavaScript. |
| document.writeln() | Identique à la méthode write(), sauf qu'un caractère de nouvelle ligne est écrit après chaque expression. |
ATTENTION !!!
Dans W3C DOM Core, Objet Document Hérite de toutes les propriétés et méthodes des objets nœuds.
De nombreuses propriétés et méthodes n'ont aucun sens dans la documentation.
Les objets de document HTML peuvent éviter d'utiliser ces objets et attributs de nœud :
| Attributs/méthodes | Raisons à éviter |
|---|
| 属性 / 方法 | 避免的原因 |
|---|---|
| document.attributes | 文档没有该属性 |
| document.hasAttributes() | 文档没有该属性 |
| document.nextSibling | 文档没有下一节点 |
| document.nodeName | 这个通常是 #document |
| document.nodeType | 这个通常是 9(DOCUMENT_NODE) |
| document.nodeValue | 文档没有一个节点值 |
| document.ownerDocument | 文档没有主文档 |
| document.ownerElement | 文档没有自己的节点 |
| document.parentNode | 文档没有父节点 |
| document.previousSibling | 文档没有兄弟节点 |
| document.textContent | 文档没有文本节点 |
