JavaScript - Il W3C DOM
Questo modello a oggetti del documento consente l'accesso e la modifica di tutto il contenuto del documento ed è standardizzato dal World Wide Web Consortium (W3C). Questo modello è supportato da quasi tutti i browser moderni.
Il DOM W3C standardizza la maggior parte delle funzionalità del DOM legacy e ne aggiunge di nuove. Oltre a supportare moduli [], immagini [] e altre proprietà di array dell'oggetto Document, definisce metodi che consentono agli script di accedere e manipolare qualsiasi elemento del documento e non solo elementi speciali come moduli e immagini.
Proprietà del documento in W3C DOM
Questo modello supporta tutte le proprietà disponibili in Legacy DOM. Inoltre, ecco un elenco di proprietà del documento a cui è possibile accedere utilizzando W3C DOM.
| Sr.No. | Proprietà e descrizione |
|---|---|
| 1 | body Un riferimento all'oggetto Element che rappresenta il tag <body> di questo documento. Ex - document.body |
| 2 | defaultView La sua proprietà di sola lettura e rappresenta la finestra in cui viene visualizzato il documento. Ex - document.defaultView |
| 3 | documentElement Un riferimento di sola lettura al tag <html> del documento. Ex - document.documentElement8 / 31/2008 |
| 4 | implementation È una proprietà di sola lettura e rappresenta l'oggetto DOMImplementation che rappresenta l'implementazione che ha creato questo documento. Ex - document.implementation |
Metodi del documento in W3C DOM
Questo modello supporta tutti i metodi disponibili in Legacy DOM. Inoltre, ecco un elenco di metodi supportati da W3C DOM.
| Sr.No. | Proprietà e descrizione |
|---|---|
| 1 | createAttribute( name) Restituisce un nodo Attr appena creato con il nome specificato. Ex - document.createAttribute (nome) |
| 2 | createComment( text) Crea e restituisce un nuovo nodo Commento contenente il testo specificato. Ex - document.createComment (testo) |
| 3 | createDocumentFragment( ) Crea e restituisce un nodo DocumentFragment vuoto. Ex - document.createDocumentFragment () |
| 4 | createElement( tagName) Crea e restituisce un nuovo nodo Element con il nome del tag specificato. Ex - document.createElement (tagName) |
| 5 | createTextNode( text) Crea e restituisce un nuovo nodo Testo che contiene il testo specificato. Ex - document.createTextNode (testo) |
| 6 | getElementById( id) Restituisce l'Elemento di questo documento che ha il valore specificato per il suo attributo id, o null se tale Elemento non esiste nel documento. Ex - document.getElementById (id) |
| 7 | getElementsByName( name) Restituisce un array di nodi di tutti gli elementi nel documento che hanno un valore specificato per il loro attributo name. Se non vengono trovati tali elementi, restituisce un array di lunghezza zero. Ex - document.getElementsByName (nome) |
| 8 | getElementsByTagName( tagname) Restituisce un array di tutti i nodi Element in questo documento che hanno il nome del tag specificato. I nodi Element vengono visualizzati nella matrice restituita nello stesso ordine in cui appaiono nell'origine del documento. Ex - document.getElementsByTagName (tagname) |
| 9 | importNode( importedNode, deep) Crea e restituisce una copia di un nodo da un altro documento adatto per l'inserimento in questo documento. Se l'argomento profondo è vero, copia in modo ricorsivo anche i figli del nodo. Supportato in DOM versione 2 Ex - document.importNode (ImportantNode, deep) |
Esempio
Questo è molto facile da manipolare (Accesso e impostazione) elemento del documento utilizzando W3C DOM. Puoi usare uno qualsiasi dei metodi comegetElementById, getElementsByName, o getElementsByTagName.
Ecco un esempio per accedere alle proprietà del documento utilizzando il metodo DOM 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 - Questo esempio restituisce oggetti per form ed elementi e dovremmo accedere ai loro valori utilizzando quelle proprietà dell'oggetto che non sono discusse in questo tutorial.