ES6 - DOM HTML
Chaque page Web réside dans une fenêtre de navigateur, qui peut être considérée comme un objet.
UNE document objectreprésente le document HTML affiché dans cette fenêtre. L'objet document a diverses propriétés qui font référence à d'autres objets qui permettent d'accéder et de modifier le contenu du document.
Le mode d'accès et de modification du contenu d'un document est appelé Document Object Model, ou DOM. Les objets sont organisés selon une hiérarchie. Cette structure hiérarchique s'applique à l'organisation des objets dans un document Web.
Voici une simple hiérarchie de quelques objets importants -
Il existe plusieurs DOM. Les sections suivantes expliquent chacun de ces DOM en détail et décrivent comment vous pouvez les utiliser pour accéder et modifier le contenu du document.
The Legacy DOM- C'est le modèle qui a été introduit dans les premières versions du langage JavaScript. Il est bien pris en charge par tous les navigateurs, mais ne permet d'accéder qu'à certaines parties clés des documents, telles que les formulaires, les éléments de formulaire et les images.
The W3C DOM- Ce modèle d'objet de document permet l'accès et la modification de tout le contenu du document et est normalisé par le World Wide Web Consortium (W3C). Ce modèle est pris en charge par presque tous les navigateurs modernes.
The IE4 DOM- Ce modèle d'objet de document a été introduit dans la version 4 du navigateur Internet Explorer de Microsoft. IE 5 et les versions ultérieures incluent la prise en charge de la plupart des fonctionnalités DOM de base du W3C.
Le DOM hérité
C'est le modèle qui a été introduit dans les premières versions du langage JavaScript. Il est bien pris en charge par tous les navigateurs, mais ne permet d'accéder qu'à certaines parties clés des documents, telles que les formulaires, les éléments de formulaire et les images.
Ce modèle fournit plusieurs propriétés en lecture seule, telles que le titre, l'URL et lastModified, fournissent des informations sur le document dans son ensemble. En dehors de cela, il existe différentes méthodes fournies par ce modèle qui peuvent être utilisées pour définir et obtenir les valeurs de propriété du document.
Propriétés du document dans l'ancien DOM
Vous trouverez ci-dessous une liste des propriétés de document accessibles à l'aide de Legacy DOM.
| Sr.Non | Propriété et description |
|---|---|
| 1 | alinkColor Obsolète - Une chaîne qui spécifie la couleur des liens activés. Example : document.alinkColor |
| 2 | anchors[ ] Un tableau d'objets d'ancrage, un pour chaque ancre qui apparaît dans le document. Example : document.anchors [0], document.anchors [1] et ainsi de suite |
| 3 | applets[ ] Un tableau d'objets applet, un pour chaque applet qui apparaît dans le document. Example : document.applets [0], document.applets [1] et ainsi de suite |
| 4 | bgColor Deprecated - Une chaîne qui spécifie la couleur d'arrière-plan du document. Example : document.bgColor |
| 5 | Cookie Une propriété à valeur de chaîne avec un comportement spécial qui permet aux cookies associés à ce document d'être interrogés et définis. Example : document.cookie |
| 6 | Domain Chaîne qui spécifie le domaine Internet dont provient le document. Utilisé à des fins de sécurité. Example : document.domaine |
| sept | embeds[ ] Un tableau d'objets qui représentent des données incorporées dans le document avec la balise <embed>. Un synonyme de plugins []. Certains plugins et contrôles ActiveX peuvent être contrôlés avec du code JavaScript. Example : document.embeds [0], document.embeds [1] et ainsi de suite |
| 8 | fgColor Chaîne qui spécifie la couleur de texte par défaut du document. Example : document.fgColor |
| 9 | forms[ ] Un tableau d'objets de formulaire, un pour chaque formulaire HTML qui apparaît dans le document. Example : document.forms [0], document.forms [1] et ainsi de suite |
| dix | images[ ] Un tableau d'objets de formulaire, un pour chaque formulaire HTML qui apparaît dans le document avec la balise HTML <img>. Example : document.forms [0], document.forms [1] et ainsi de suite |
| 11 | lastModified Chaîne en lecture seule qui spécifie la date de la modification la plus récente du document. Example : document.lastModified |
| 12 | linkColor Obsolète - Une chaîne qui spécifie la couleur des liens non visités. Example : document.linkColor |
| 13 | links[ ] C'est un tableau de liens vers des documents. Example : document.links [0], document.links [1] et ainsi de suite |
| 14 | Location L'URL du document. Déconseillé en faveur de la propriété URL. Example : document.location |
| 15 | plugins[ ] Un synonyme pour les incorporations [] Example : document.plugins [0], document.plugins [1] et ainsi de suite |
| 16 | Referrer Chaîne en lecture seule contenant l'URL du document, le cas échéant, à partir de laquelle le document actuel a été lié. Example : document.referrer |
| 17 | Title Le contenu textuel de la balise <title>. Example : titre du document |
| 18 | URL Chaîne en lecture seule qui spécifie l'URL du document. Example : document.URL |
| 19 | vlinkColor Obsolète - Une chaîne qui spécifie la couleur des liens visités. Example : document.vlinkColor |
Méthodes de document dans l'ancien DOM
Voici une liste des méthodes prises en charge par Legacy DOM.
| Sr.Non | Propriété et description |
|---|---|
| 1 | clear( ) Obsolète - Efface le contenu du document et ne renvoie rien. Example : document.clear () |
| 2 | close( ) Ferme un flux de documents ouvert avec la méthode open () et ne renvoie rien. |
| 3 | open( ) Supprime le contenu du document existant et ouvre un flux dans lequel le nouveau contenu du document peut être écrit. Ne renvoie rien. Example : document.open () |
| 4 | write( value, ...) Insère la ou les chaînes spécifiées dans le document en cours d'analyse ou les ajoute au document ouvert avec open (). Ne renvoie rien. Example : document.write (valeur, ...) |
| 5 | writeln( value, ...) Identique à write (), sauf qu'il ajoute un caractère de nouvelle ligne à la sortie. Ne renvoie rien. Example : document.writeln (valeur, ...) |
Nous pouvons localiser n'importe quel élément HTML dans n'importe quel document HTML en utilisant HTML DOM. Par exemple, si un document Web contient un élément de formulaire, alors en utilisant JavaScript, nous pouvons le désigner comme document.forms [0]. Si votre document Web comprend deux éléments de formulaire, le premier formulaire est appelé document.forms [0] et le second document.forms [1].
En utilisant la hiérarchie et les propriétés données ci-dessus, nous pouvons accéder au premier élément de formulaire en utilisant document.forms [0] .elements [0] et ainsi de suite.
Exemple
Voici un exemple d'accès aux propriétés du document à l'aide de la méthode Legacy DOM.
<html>
<head>
<title> Document Title </title>
<script type = "text/javascript">
<!--
function myFunc() {
var ret = document.title;
alert("Document Title : " + ret );
var ret = document.URL;
alert("Document URL : " + ret );
var ret = document.forms[0];
alert("Document First Form : " + ret );
var ret = document.forms[0].elements[1];
alert("Second element : " + ret );
} //
-->
</script>
</head>
<body>
<h1 id = "title">This is main title</h1>
<p>Click the following to see the result:</p>
<form name = "FirstForm">
<input type = "button" value = "Click Me" onclick = "myFunc();" />
<input type = "button" value = "Cancel">
</form>
<form name = "SecondForm">
<input type = "button" value = "Don't ClickMe"/>
</form>
</body>
</html>Production
La sortie suivante s'affiche lors de l'exécution réussie du code ci-dessus.
Note- Cet exemple renvoie les objets pour les formulaires et les éléments. Nous devrions accéder à leurs valeurs en utilisant les propriétés d'objet qui ne sont pas abordées dans ce didacticiel.