JavaScript - 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 des valeurs de propriété de document.
Propriétés du document dans l'ancien DOM
Voici une liste des propriétés de document accessibles en utilisant Legacy DOM.
| N ° Sr. | Propriété et description |
|---|---|
| 1 | alinkColor Obsolète - Une chaîne qui spécifie la couleur des liens activés. Ex - document.alinkColor |
| 2 | anchors[ ] Un tableau d'objets d'ancrage, un pour chaque ancre qui apparaît dans le document Ex - 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 Ex - 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. Ex - 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. Ex - document.cookie |
| 6 | domain Chaîne qui spécifie le domaine Internet dont provient le document. Utilisé à des fins de sécurité. Ex - 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. Ex - document.embeds [0], document.embeds [1] et ainsi de suite |
| 8 | fgColor Obsolète - Une chaîne qui spécifie la couleur de texte par défaut pour le document Ex - document.fgColor |
| 9 | forms[ ] Un tableau d'objets Form, un pour chaque formulaire HTML qui apparaît dans le document. Ex - document.forms [0], document.forms [1] et ainsi de suite |
| dix | images[ ] Un tableau d'objets Image, un pour chaque image incorporée dans le document avec la balise HTML <img>. Ex - document.images [0], document.images [1] et ainsi de suite |
| 11 | lastModified Une chaîne en lecture seule qui spécifie la date de la modification la plus récente du document Ex - document.lastModified |
| 12 | linkColor Obsolète - Une chaîne qui spécifie la couleur des liens non visités Ex - document.linkColor |
| 13 | links[ ] C'est un tableau de liens vers des documents. Ex - document.links [0], document.links [1] et ainsi de suite |
| 14 | location L'URL du document. Déconseillé au profit de la propriété URL. Ex - document.location |
| 15 | plugins[ ] Un synonyme pour les intégrations [] Ex - 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é. Ex - document.referrer |
| 17 | Title Le contenu textuel de la balise <title>. Ex - document.title |
| 18 | URL Chaîne en lecture seule qui spécifie l'URL du document. Ex - document.URL |
| 19 | vlinkColor Obsolète - Une chaîne qui spécifie la couleur des liens visités. Ex - document.vlinkColor |
Méthodes de document dans l'ancien DOM
Voici une liste des méthodes prises en charge par Legacy DOM.
| N ° Sr. | Propriété et description |
|---|---|
| 1 | clear( ) Obsolète - Efface le contenu du document et ne renvoie rien. Ex - document.clear () |
| 2 | close( ) Ferme un flux de documents ouvert avec la méthode open () et ne renvoie rien. Ex - document.close () |
| 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. Ex - 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. Ex - document.write (valeur, ...) |
| 5 | writeln( value, ...) Identique à write (), sauf qu'il ajoute un caractère de nouvelle ligne à la sortie. Ne renvoie rien. Ex - document.writeln (valeur, ...) |
Exemple
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 unform élément, puis en utilisant JavaScript, nous pouvons nous y référer comme document.forms[0]. Si votre document Web comprend deuxform éléments 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] etc.
Voici un exemple pour accéder 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
NOTE - Cet exemple renvoie des objets pour les formulaires et les éléments et nous devrions accéder à leurs valeurs en utilisant les propriétés d'objet qui ne sont pas abordées dans ce didacticiel.