JavaScript - Le DOM du W3C
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.
Le DOM W3C normalise la plupart des fonctionnalités de l'ancien DOM et en ajoute également de nouvelles. En plus de prendre en charge les formulaires [], les images [] et d'autres propriétés de tableau de l'objet Document, il définit des méthodes qui permettent aux scripts d'accéder et de manipuler n'importe quel élément de document et pas seulement des éléments à usage spécial comme les formulaires et les images.
Propriétés du document dans le DOM W3C
Ce modèle prend en charge toutes les propriétés disponibles dans Legacy DOM. De plus, voici une liste de propriétés de document accessibles à l'aide du DOM W3C.
| N ° Sr. | Propriété et description |
|---|---|
| 1 | body Une référence à l'objet Element qui représente la balise <body> de ce document. Ex - document.body |
| 2 | defaultView Sa propriété en lecture seule et représente la fenêtre dans laquelle le document est affiché. Ex - document.defaultView |
| 3 | documentElement Une référence en lecture seule à la balise <html> du document. Ex - document.documentElement8 / 31/2008 |
| 4 | implementation Il s'agit d'une propriété en lecture seule et représente l'objet DOMImplementation qui représente l'implémentation qui a créé ce document. Ex - mise en œuvre du document |
Méthodes de document dans le DOM W3C
Ce modèle prend en charge toutes les méthodes disponibles dans Legacy DOM. De plus, voici une liste des méthodes prises en charge par W3C DOM.
| N ° Sr. | Propriété et description |
|---|---|
| 1 | createAttribute( name) Renvoie un nœud Attr nouvellement créé avec le nom spécifié. Ex - document.createAttribute (nom) |
| 2 | createComment( text) Crée et renvoie un nouveau nœud de commentaire contenant le texte spécifié. Ex - document.createComment (texte) |
| 3 | createDocumentFragment( ) Crée et renvoie un nœud DocumentFragment vide. Ex - document.createDocumentFragment () |
| 4 | createElement( tagName) Crée et renvoie un nouveau nœud d'élément avec le nom de balise spécifié. Ex - document.createElement (tagName) |
| 5 | createTextNode( text) Crée et renvoie un nouveau nœud de texte contenant le texte spécifié. Ex - document.createTextNode (texte) |
| 6 | getElementById( id) Renvoie l'élément de ce document qui a la valeur spécifiée pour son attribut id, ou null si aucun élément de ce type n'existe dans le document. Ex - document.getElementById (id) |
| sept | getElementsByName( name) Renvoie un tableau de nœuds de tous les éléments du document qui ont une valeur spécifiée pour leur attribut de nom. Si aucun élément de ce type n'est trouvé, renvoie un tableau de longueur nulle. Ex - document.getElementsByName (nom) |
| 8 | getElementsByTagName( tagname) Renvoie un tableau de tous les nœuds Element de ce document qui ont le nom de balise spécifié. Les nœuds Elément apparaissent dans le tableau renvoyé dans le même ordre qu'ils apparaissent dans la source du document. Ex - document.getElementsByTagName (nom de variable) |
| 9 | importNode( importedNode, deep) Crée et renvoie une copie d'un nœud à partir d'un autre document pouvant être inséré dans ce document. Si l'argument deep est vrai, il copie également de manière récursive les enfants du nœud. Pris en charge dans DOM version 2 Ex - document.importNode (ImportNode, profond) |
Exemple
Il est très facile de manipuler l'élément de document (accès et paramétrage) à l'aide du DOM W3C. Vous pouvez utiliser l'une des méthodes telles quegetElementById, getElementsByName, ou getElementsByTagName.
Voici un exemple pour accéder aux propriétés du document à l'aide de la méthode DOM du W3C.
<html>
<head>
<title> Document Title </title>
<script type = "text/javascript">
<!--
function myFunc() {
var ret = document.getElementsByTagName("title");
alert("Document Title : " + ret[0].text );
var ret = document.getElementById("heading");
alert(ret.innerHTML );
}
//-->
</script>
</head>
<body>
<h1 id = "heading">This is main title</h1>
<p>Click the following to see the result:</p>
<form id = "form1" name = "FirstForm">
<input type = "button" value = "Click Me" onclick = "myFunc();" />
<input type = "button" value = "Cancel">
</form>
<form d = "form2" name = "SecondForm">
<input type = "button" value = "Don't ClickMe"/>
</form>
</body>
</html>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.