oujood.com

DOM HTML L'objet Document

Lorsqu'un document HTML est chargé dans un navigateur web, il devient un objet document
Le Document Object Model ou DOM est en fait une représentation des différents composants du navigateur et du document Web actuel (HTML ou XML) à laquelle on peut accéder ou qu'on peut manipuler à l'aide d'un langage de script tel que JavaScript.

chercher |

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 tutorial

Dans 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

Internet Explorer Firefox Opera Google Chrome Safari

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
Par carabde 30 mars 2014



Voir aussi nos tutoriel :

Organisation du texte

Comment créer le contenu de page web. • Comment rédiger des paragraphes • La façon dont fonctionnent les titres • Comment souligner certains mots de son texte • Etc......

outline-width

Définit la largeur d'une esquisse

cercle et elipse

Dessiner des Cercles et ellipses en SVG