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.