Introduzione

  • Slug della versione: Reference_del_DOM_di_Gecko/Introduzione
  • Titolo della versione: Introduzione
  • ID versione: 198881
  • Data di creazione
  • Autore: DaViD83
  • Versione corrente? No
  • Commento

Contenuto della versione

{{template.DomRef()}}

Questa pagina fornisce una introduzione concettuale al DOM: che cosa è, in che modo fornisce una struttura per i documenti XML e HTML, come puoi accedervi, e come questa sezione presenta le informazioni di riferimento e gli esempi.

Cos'è il DOM?

Il Modello a Oggetti del Documento(DOM) è una interfaccia di programmazione per i documenti XML e HTML. Fornisce una rappresentazione strutturata del documento e definisce una modalità di accesso a questa struttura da parte dei programmi, che in questo modo possono cambiare la struttura, lo stile e il contenuto del documento. Il DOM fornisce una rappresentazione del documento come un gruppo strutturato di nodi e oggetti che hanno proprietà e metodi. Essenzialmente, esso connette le pagine HTML(o XML) agli script (o ai linguaggi di programmazione in genere).

Una pagina web è un documento. Questo documento è visibile all'utente come semplice testo(visualizzazione del codice) o attraverso un'interfaccia grafica, la pagina internet che tutti conosciamo. Il DOM è un terzo modo di guardare il documento, esso è una rappresentazione completamente orientata agli oggetti della pagina web. Attraverso di esso, oltre a guardare il documento(è un po' scomodo da fare), possiamo anche modificarlo a nostro piacimento con un linguaggio di scripting, ad esempio Javascript.

Lo standard W3C DOM forma la base per l'implementazione del DOM nei diversi browser moderni. Molti browser offrono delle estensioni del DOM che non sono comprese nello standard W3C; alcune di queste estensioni sono rimaste specifiche di un particolare browser, altre si sono invece rivelate delle buone estensioni e sono state adottate anche dagli altri browser(come ad esempio la proprietà innerHTML o la proprietà designMode), o addirittura sono state candidate a diventare standard W3C(come nel caso dell'oggetto XMLHttpRequest). In ogni caso, se si desidera che le proprie pagine siano visibili alla maggior parte dei browser, è consigliabile usare con attenzione queste estensioni proprietarie.

Tutte le proprietà, metodi ed eventi disponibili per manipolare e creare pagine web sono organizzate in oggetti. Questa documentazione fornisce dei riferimenti oggetto per oggetto al DOM implementato dai programmi basati su Gecko.

Il DOM e JavaScript

Javascript è un linguaggio di programmazione che di per sè non ha nulla a che vedere con i documenti xml o html. Esso però "entra in contatto" con il documento per mezzo del DOM, che è quindi una interfaccia per programmare l'applicazione javascript che vuole agire sul documento. Tutto ciò che è contenuto nel documento ha il suo corrispettivo nel DOM, e una modifica programmata tramite DOM si riflette in una modifica al documento. Javascript può quindi modificare il documento attraverso i metodi del DOM, come si può vedere nel seguente esempio:

<span id="esempio">1</span>
<script type="text/javascript">
  //document.getElementById è un metodo del DOM, non di Javascript
  var esempio=document.getElementById('esempio');
  //Ora possiamo manipolare l'oggetto usando la proprietà innerHTML,
  //che fa sempre parte del DOM
  esempio.innerHTML="2";
</script>

Il DOM è stato ideato per essere indipendente dai diversi linguaggio di programmazione ai quali fornisce una interfaccia, e pertanto esso può essere manipolato non solo da javascript, ma anche da altri linguaggi come ad esempio Python; il seguente esempio mostra come Python può accedere al DOM:

# Python DOM example
import xml.dom.minidom as m
doc = m.parse("C:\\Projects\\Py\\chap1.xml");
doc.nodeName # DOM property of document object;
p_list = doc.getElementsByTagName("para");

Come faccio ad accedere al DOM?

Non devi fare niente di speciale per iniziare a usare il DOM. Quando crei uno script, puoi immediatamente iniziare a usare le API degli elementi window e document per manipolare il documento in sè o i nodi figli del documento, cioè i vari elementi presenti nella pagina(tabelle, form, paragrafi, liste...). Un esempio immediato di programmazione con il DOM è il seguente:

<body onload="window.alert('welcome to my home page!');">

il quale visualizza un messaggio (in questo caso di benvenuto), non appena la pagina ha finito di caricarsi, usando il metodo alert() che fa parte dell'oggetto window, presente nella rappresentazione DOM del documento. Quando il codice è inserito direttamente in un attributo di un elemento HTML, si parla di Javascript in-line; un modo per molti versi migliore per avere uno script è quello di racchiuderlo in un elemento <script>, da posizionare a sua volta all'interno dell'elemento HEAD del documento. Eciò che avviene nel seguente esempio:

<html>
<head>
<script>
// run this function when the document is loaded
window.onload = function() {
   // create a couple of elements 
   // in an otherwise empty HTML page
   heading = document.createElement("h1");
   heading_text = document.createTextNode("Big Head!");
   heading.appendChild(heading_text);
   document.body.appendChild(heading);
}
</script>
</head>
<body>
</body>
</html>

Come si può notare, il corpo del documento è inizialmente vuoto;l'attributo onload dell'oggetto window stabilisce che non appena il documento è stato caricato venga eseguita una funzione Javascript, la quale manipola il DOM per creare un elemento H1, inserirgli dentro del testo, e infine far comparire il tutto all'interno del documento.

Tipi di Dato Rilevanti

Questa reference cerca di descrivere i vari oggetti e tipi di dato nella maniera più semplice possibile, ma è comunque utile conoscere i vari tipi di dato che vengono manipolati tramite API. Per semplicità, negli esempi ci si riferisce ai nodi chiamandoli elementi, agli array di nodi con nodeLists, e ai nodi attributo semplicemente con attributi.

La tabella seguente riassume brevemente questi tipi di dato.

document Quando un membro restituisce un oggetto di tipo document(e.g., la proprietà ownerDocument di un elemento restituisce il document di cui fa parte), questo oggetto è l'oggetto radice del documento.
element element si riferisce a un elemento o a un nodo di tipo element restituito da un membro dell'API del DOM. Invece di dire ad esempio che il metodo document.createElement() restituisce un riferimento a oggetto diretto a un node, diciamo semplicemente che il metodo restituisce l'elemento che è stato appena creato nel DOM. L'oggetto element implementa l'interfaccia Element del DOM in aggiunta all'interfaccia Node che è più di base, ma queste due interfacce vengono trattate come una sola in questa reference.
nodeList Una nodeList è un array di elementi, quello quello restituito dal metodo document.getElementsByTagName(). Items in a nodeList are accessed by index in either of two ways:
  • list.item(1)
  • list{{mediawiki.external(1)}}

These two are equivalent. In the first, item() is the single method on the nodeList object. The latter uses the typical array syntax to fetch the second item in the list.

attribute When an attribute is returned by a member (e.g., by the createAttribute() method), it is an object reference that exposes a special (albeit small) interface for attributes. Attributes are nodes in the DOM just like elements are, though you may rarely use them as such.
NamedNodeMap A namedNodeMap is like an array, but the items are accessed by name or index, though this latter case is merely a convenience for enumeration, as they are in no particular order in the list. A NamedNodeMap has an item() method for this purpose, and you can also add and remove items from a NamedNodeMap

DOM Interfaces

A stated purpose of this guide is to minimize talk about abstract interfaces, inheritance, and other implementation details, and to talk instead about the objects in the DOM, about the actual things you can use to manipulate the DOM hierarchy. From the point of view of the web programmer, it's often a matter of indifference that the object representing the HTML FORM element gets its name property from the HTMLFormElement interface but its className property from the HTMLElement interface proper. In both cases, the property you want is simply in the form object.

But the relationship between objects and the interfaces that they implement in the DOM can be confusing, and so this section attempts to say a little something about the actual interfaces in the DOM specification and how they are made available.

Interfaces and Objects

In some cases, an object implements a single interface. But more often than not, an object like a HTML table borrow from several different interfaces. The table object, for example, implements a specialized HTML Table Element Interface, which includes such methods as createCaption and insertRow. But since it's also an HTML element, table implements the Element interface described in the DOM element Reference chapter. And finally, since an HTML element is also, as far as the DOM is concerned, a node in the tree of nodes that make up the object model for a web page or an XML page, the table element also implements the more basic Node interface, from which Element derives.

When you get a reference to a table object, as in the following example, you routinely use all three of these interfaces interchangeably on the object, perhaps without knowing it.

var table = document.getElementById("table");
var tableAttrs = table.attributes; // Node/Element interface
for(var i = 0; i < tableAttrs.length; i++){
  // HTMLTableElement interface: border attribute
  if(tableAttrs[i].nodeName.toLowerCase() == "border")
    table.border = "1"; 
}
// HTMLTableElement interface: summary attribute
table.summary = "note: increased border";

Core Interfaces in the DOM

This section lists some of the most commonly-used interfaces in the DOM. The idea is not to describe what these APIs do here but to give you an idea of the sorts of methods and properties you will see very often as you use the DOM. These common APIs are used in the longer examples in the DOM Examples chapter at the end of this book.

Document and window objects are the objects whose interfaces you generally use most often in DOM programming. In simple terms, the window object represents something like the browser, and the document object is the root of the document itself. Element inherits from the generic Node interface, and together these two interfaces provide many of the methods and properties you use on individual elements. These elements may also have specific interfaces for dealing with the kind of data those elements hold, as in the table object example in the previous section.

The following is a brief list of common APIs in web and XML page scripting using the DOM.

Testing the DOM API

This document provides samples for every interface that you can use in your own web development. In some cases, the samples are complete HTML pages, with the DOM access in a <script> element, the interface (e.g, buttons) necessary to fire up the script in a form, and the HTML elements upon which the DOM operates listed as well. When this is the case, you can cut and paste the example into a new HTML document, save it, and run the example from the browser.

There are some cases, however, when the examples are more concise. To run examples that only demonstrate the basic relationship of the interface to the HTML elements, you may want to set up a test page in which interfaces can be easily accessed from scripts. The following very simple web page provides a <script> element in the header in which you can place functions that test the interface, a few HTML elements with attributes that you can retrieve, set, or otherwise manipulate, and the web user interface necessary to call those functions from the browser.

You can use this test page or create a similar one to test the DOM interfaces you are interested in and see how they work on the browser platform. You can update the contents of the test() function as needed, create more buttons, or add elements as necessary.

<html>
<head>
<title>DOM Tests</title>
<script type="application/x-javascript">
function setBodyAttr(attr,value){
  if(document.body) eval('document.body.'+attr+'="'+value+'"');
  else notSupported();
}
</script>
</head> 
<body>
<div style="margin: .5in; height="400""> 
<p><b><tt>text</tt> color</p> 
<form> 
<select onChange="setBodyAttr('text',
    this.options[this.selectedIndex].value);"> 
<option value="black">black 
<option value="darkblue">darkblue 
</select>
 <p><b><tt>bgColor</tt></p>
 <select onChange="setBodyAttr('bgColor',
    this.options[this.selectedIndex].value);"> 
<option value="white">white 
<option value="lightgrey">gray
 </select>
<p><b><tt>link</tt></p> 
<select onChange="setBodyAttr('link',
     this.options[this.selectedIndex].value);">
<option value="blue">blue
<option value="green">green
</select>  <small>
     <a href="http://www.brownhen.com/dom_api_top.html" id="sample">
(sample link)</a></small><br>
</form>
<form>
  <input type="button" value="version" onclick="ver()" />
</form>
</div>
</body>
</html>

To test a lot of interfaces in a single page-for example, a "suite" of properties that affect the colors of a web page-you can create a similar test page with a whole console of buttons, textfields, and other HTML elements. The following screenshot gives you some idea of how interfaces can be grouped together for testing.

Image:DOM_Ref_Introduction_to_the_DOM.gif
Figure 0.1 Sample DOM Test Page

In this example, the dropdown menus dynamically update such DOM-accessible aspects of the web page as its background color (bgColor), the color of the hyperlinks (aLink), and color of the text (text). However you design your test pages, testing the interfaces as you read about them is an important part of learning how to use the DOM effectively.

{{ wiki.languages( { "fr": "fr/R\u00e9f\u00e9rence_du_DOM_Gecko/Introduction", "pl": "pl/Dokumentacja_Gecko_DOM/Wprowadzenie" } ) }}

Sorgente della versione

<p>
{{template.DomRef()}}
</p><p>Questa pagina fornisce una introduzione concettuale al DOM: che cosa è, in che modo fornisce una struttura per i documenti <a href="it/XML">XML</a> e <a href="it/HTML">HTML</a>, come puoi accedervi, e come questa sezione presenta le informazioni di riferimento e gli esempi.
</p>
<h3 name="Cos.27.C3.A8_il_DOM.3F">Cos'è il DOM?</h3>
<p>Il Modello a Oggetti del Documento(DOM) è una interfaccia di programmazione per i documenti XML e HTML. Fornisce una rappresentazione strutturata del documento e definisce una modalità di accesso a questa struttura da parte dei programmi, che in questo modo possono cambiare la struttura, lo stile e il contenuto del documento. Il DOM fornisce una rappresentazione del documento come un gruppo strutturato di nodi e oggetti che hanno proprietà e metodi. Essenzialmente, esso connette le pagine HTML(o XML) agli script (o ai linguaggi di programmazione in genere).
</p><p>Una pagina web è un documento. Questo documento è visibile all'utente come semplice testo(visualizzazione del codice) o attraverso un'interfaccia grafica, la pagina internet che tutti conosciamo. Il DOM è un terzo modo di guardare il documento, esso è una rappresentazione completamente orientata agli oggetti della pagina web. Attraverso di esso, oltre a guardare il documento(è un po' scomodo da fare), possiamo anche modificarlo a nostro piacimento con un linguaggio di scripting, ad esempio <a href="it/Javascript">Javascript</a>.
</p><p>Lo standard <a class="external" href="http://www.w3.org/DOM/">W3C DOM</a> forma la base per l'implementazione del DOM nei diversi browser moderni. Molti browser offrono delle estensioni del DOM che non sono comprese nello standard W3C; alcune di queste estensioni sono rimaste specifiche di un particolare browser, altre si sono invece rivelate delle buone estensioni e sono state adottate anche dagli altri browser(come ad esempio la proprietà innerHTML o la proprietà designMode), o addirittura sono state candidate a diventare standard W3C(come nel caso dell'oggetto XMLHttpRequest). In ogni caso, se si desidera che le proprie pagine siano visibili alla maggior parte dei browser, è consigliabile usare con attenzione queste estensioni proprietarie.
</p><p>Tutte le proprietà, metodi ed eventi disponibili per manipolare e creare pagine web sono organizzate in oggetti.
Questa documentazione fornisce dei riferimenti oggetto per oggetto al DOM implementato dai programmi basati su Gecko.
</p>
<h3 name="Il_DOM_e_JavaScript">Il DOM e JavaScript</h3>
<p><a href="it/Javascript">Javascript</a> è un linguaggio di programmazione che di per sè non ha nulla a che vedere con i documenti xml o html. Esso però "entra in contatto" con il documento per mezzo del DOM, che è quindi una interfaccia per programmare l'applicazione javascript che vuole agire sul documento. Tutto ciò che è contenuto nel documento ha il suo corrispettivo nel DOM, e una modifica programmata tramite DOM si riflette in una modifica al documento. Javascript può quindi modificare il documento attraverso i metodi del DOM, come si può vedere nel seguente esempio:
</p>
<pre>&lt;span id="esempio"&gt;1&lt;/span&gt;
&lt;script type="text/javascript"&gt;
  //document.getElementById è un metodo del DOM, non di Javascript
  var esempio=document.getElementById('esempio');
  //Ora possiamo manipolare l'oggetto usando la proprietà innerHTML,
  //che fa sempre parte del DOM
  esempio.innerHTML="2";
&lt;/script&gt;
</pre>
<p>Il DOM è stato ideato per essere indipendente dai diversi linguaggio di programmazione ai quali fornisce una interfaccia, e pertanto esso può essere manipolato non solo da javascript, ma anche da altri linguaggi come ad esempio Python; il seguente esempio mostra come Python può accedere al DOM:
</p>
<pre class="eval"># Python DOM example
import xml.dom.minidom as m
doc = m.parse("C:\\Projects\\Py\\chap1.xml");
doc.nodeName # DOM property of document object;
p_list = doc.getElementsByTagName("para");
</pre>
<h3 name="Come_faccio_ad_accedere_al_DOM.3F">Come faccio ad accedere al DOM?</h3>
<p>Non devi fare niente di speciale per iniziare a usare il DOM. Quando crei uno script, puoi immediatamente iniziare a usare le API degli elementi <code><a href="it/DOM/window">window</a></code> e <code><a href="it/DOM/document">document</a></code> per manipolare il documento in sè o i nodi figli del documento, cioè i vari elementi presenti nella pagina(tabelle, form, paragrafi, liste...).
Un esempio immediato di programmazione con il DOM è il seguente:
</p>
<pre class="eval">&lt;body onload="window.alert('welcome to my home page!');"&gt;
</pre>
<p>il quale visualizza un messaggio (in questo caso di benvenuto), non appena la pagina ha finito di caricarsi, usando il metodo <code><a href="it/DOM/window.alert">alert()</a></code> che fa parte dell'oggetto <code><a href="it/DOM/window">window</a></code>, presente nella rappresentazione DOM del documento. 
Quando il codice è inserito direttamente in un attributo di un elemento HTML, si parla di Javascript in-line; un modo per molti versi migliore per avere uno script è quello di racchiuderlo in un elemento <code>&lt;script&gt;</code>, da posizionare a sua volta all'interno dell'elemento HEAD del documento. Eciò che avviene nel seguente esempio:
</p>
<pre class="eval">&lt;html&gt;
&lt;head&gt;
&lt;script&gt;
// run this function when the document is loaded
window.onload = function() {
   // create a couple of elements 
   // in an otherwise empty HTML page
   heading = document.createElement("h1");
   heading_text = document.createTextNode("Big Head!");
   heading.appendChild(heading_text);
   document.body.appendChild(heading);
}
&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;/body&gt;
&lt;/html&gt;
</pre>
<p>Come si può notare, il corpo del documento è inizialmente vuoto;l'attributo <code><a href="it/DOM/window.onload">onload</a></code> dell'oggetto <code><a href="it/DOM/window">window</a></code> stabilisce che non appena il documento è stato caricato venga eseguita una funzione Javascript, la quale manipola il DOM per creare un elemento H1, inserirgli dentro del testo, e infine far comparire il tutto all'interno del documento.
</p>
<h3 name="Tipi_di_Dato_Rilevanti">Tipi di Dato Rilevanti</h3>
<p>Questa reference cerca di descrivere i vari oggetti e tipi di dato nella maniera più semplice possibile, ma è comunque utile conoscere i vari tipi di dato che vengono manipolati tramite API. Per semplicità, negli esempi ci si riferisce ai nodi chiamandoli elementi, agli array di nodi con nodeLists, e ai nodi attributo semplicemente con attributi.
</p><p>La tabella seguente riassume brevemente questi tipi di dato.
</p>
<table border="1" cellpadding="5" cellspacing="0">
  <tbody><tr>
    <td><code>document</code></td>
    <td>Quando un membro restituisce un oggetto di tipo <code>document</code>(e.g., la proprietà <b>ownerDocument</b> di un elemento restituisce il document di cui fa parte), questo oggetto è l'oggetto radice del documento.</td>
  </tr>

  <tr>
    <td><code>element</code></td>
    <td><code>element</code> si riferisce a un elemento o a un nodo di tipo <code>element</code> restituito da un membro dell'API del DOM. Invece di dire ad esempio che il metodo <code>document.createElement()</code> restituisce un riferimento a oggetto diretto a un <code>node</code>, diciamo semplicemente che il metodo restituisce l'elemento che è stato appena creato nel DOM. 
L'oggetto <code>element</code> implementa l'interfaccia <code>Element</code> del DOM in aggiunta all'interfaccia <code>Node</code> che è più di base, ma queste due interfacce vengono trattate come una sola in questa reference.</td>
  </tr>

  <tr>
    <td><code>nodeList</code></td>
    <td>Una <code>nodeList</code> è un array di elementi, quello quello restituito dal metodo <code>document.getElementsByTagName()</code>. Items in a <code>nodeList</code> are accessed by index in either of two ways: 
<ul><li> list.item(1)
</li><li> list{{mediawiki.external(1)}}
</li></ul>
<p>These two are equivalent. In the first, <b>item()</b> is the single method on the <code>nodeList</code> object. The latter uses the typical array syntax to fetch the second item in the list.
</p>
</td>
  </tr>
  <tr>
    <td><code>attribute</code></td>
    <td>When an <code>attribute</code> is returned by a member (e.g., by the <b>createAttribute()</b> method), it is an object reference that exposes a special (albeit small) interface for attributes. Attributes are nodes in the DOM just like elements are, though you may rarely use them as such.</td>
  </tr>
  <tr>
    <td><code>NamedNodeMap</code></td>
    <td>A <code>namedNodeMap</code> is like an array, but the items are accessed by name or index, though this latter case is merely a convenience for enumeration, as they are in no particular order in the list. A <code>NamedNodeMap</code> has an item() method for this purpose, and you can also add and remove items from a <code>NamedNodeMap </code></td>
  </tr>
</tbody></table>
<h3 name="DOM_Interfaces">DOM Interfaces</h3>
<p>A stated purpose of this guide is to minimize talk about abstract interfaces, inheritance, and other  implementation details, and to talk instead about the objects in the DOM, about the actual <i>things</i> you can use to manipulate the DOM hierarchy. From the point of view of the web programmer, it's often a matter of indifference that the object representing the <code>HTML FORM</code> element gets its <b>name</b> property from the <code>HTMLFormElement</code> interface but its <b>className</b> property from the <code>HTMLElement</code> interface proper. In both cases, the property you want is simply in the form object.
</p><p>But the relationship between objects and the interfaces that they implement in the DOM can be confusing, and so this section attempts to say a little something about the actual interfaces in the DOM specification and how they are made available.
</p>
<h4 name="Interfaces_and_Objects">Interfaces and Objects</h4>
<p>In some cases, an object implements a single interface. But more often than not, an object like a HTML <code>table</code> borrow from several different interfaces. The table object, for example, implements a specialized <a href="it/DOM/table">HTML Table Element Interface</a>, which includes such methods as <code>createCaption</code> and <code>insertRow</code>. But since it's also an HTML element, <code>table</code> implements the <code>Element</code> interface described in the <a href="it/Gecko_DOM_Reference/element">DOM <code>element</code> Reference</a> chapter. And finally, since an HTML element is also, as far as the DOM is concerned, a node in the tree of nodes that make up the object model for a web page or an XML page, the table element also implements the more basic <code>Node</code> interface, from which <code>Element</code> derives.
</p><p>When you get a reference to a <code>table</code> object, as in the following example, you routinely use all three of these interfaces interchangeably on the object, perhaps without knowing it.
</p>
<pre>var table = document.getElementById("table");
var tableAttrs = table.attributes; // Node/Element interface
for(var i = 0; i &lt; tableAttrs.length; i++){
  // HTMLTableElement interface: border attribute
  if(tableAttrs[i].nodeName.toLowerCase() == "border")
    table.border = "1"; 
}
// HTMLTableElement interface: summary attribute
table.summary = "note: increased border";
</pre>
<h4 name="Core_Interfaces_in_the_DOM">Core Interfaces in the DOM</h4>
<p>This section lists some of the most commonly-used interfaces in the DOM. The idea is not to describe what these APIs do here but to give you an idea of the sorts of methods and properties you will see very often as you use the DOM. These common APIs are used in the longer examples in the <a href="it/Gecko_DOM_Reference/Examples">DOM Examples</a> chapter at the end of this book.
</p><p><code>Document</code> and <code>window</code> objects are the objects whose interfaces you generally use most often in DOM programming. In simple terms, the <code>window</code> object represents something like the browser, and the <code>document</code> object is the root of the document itself. <code>Element</code> inherits from the generic <code>Node</code> interface, and together these two interfaces provide many of the methods and properties you use on individual elements. These elements may also have specific interfaces for dealing with the kind of data those elements hold, as in the <code>table</code> object example in the previous section.
</p><p>The following is a brief list of common APIs in web and XML page scripting using the DOM.
</p>
<ul><li> <code><a href="it/DOM/document.getElementById">document.getElementById</a>(id)</code>
</li><li> <code>element.<a href="it/DOM/element.getElementsByTagName">getElementsByTagName</a>(name)</code>
</li><li> <code><a href="it/DOM/document.createElement">document.createElement</a>(name)</code>
</li><li> <code>parentNode.<a href="it/DOM/element.appendChild">appendChild</a>(node)</code>
</li><li> <code>element.<a href="it/DOM/element.innerHTML">innerHTML</a></code>
</li><li> <code>element.<a href="it/DOM/element.style">style</a>.left</code>
</li><li> <code>element.<a href="it/DOM/element.setAttribute">setAttribute</a></code>
</li><li> <code>element.<a href="it/DOM/element.getAttribute">element.getAttribute</a></code>
</li><li> <code>element.<a href="it/DOM/element.addEventListener">addEventListener</a></code>
</li><li> <code><a href="it/DOM/window.content">window.content</a></code>
</li><li> <code><a href="it/DOM/window.onload">window.onload</a></code>
</li><li> <code><a href="it/DOM/window.dump">window.dump</a></code>
</li><li> <code><a href="it/DOM/window.scrollTo">window.scrollTo</a></code>
</li></ul>
<h3 name="Testing_the_DOM_API">Testing the DOM API</h3>
<p>This document provides samples for every interface that you can use in your own web development. In some cases, the samples are complete HTML pages, with the DOM access in a &lt;script&gt; element, the interface (e.g, buttons) necessary to fire up the script in a form, and the HTML elements upon which the DOM operates listed as well. When this is the case, you can cut and paste the example into a new HTML document, save it, and run the example from the browser.
</p><p>There are some cases, however, when the examples are more concise. To run examples that only demonstrate the basic relationship of the interface to the HTML elements, you may want to set up a test page in which interfaces can be easily accessed from scripts. The following very simple web page provides a &lt;script&gt; element in the header in which you can place functions that test the interface, a few HTML elements with attributes that you can retrieve, set, or otherwise manipulate, and the web user interface necessary to call those functions from the browser.
</p><p>You can use this test page or create a similar one to test the DOM interfaces you are interested in and see how they work on the browser platform. You can update the contents of the <code>test()</code> function as needed, create more buttons, or add elements as necessary.
</p>
<pre>&lt;html&gt;
&lt;head&gt;
&lt;title&gt;DOM Tests&lt;/title&gt;
&lt;script type="application/x-javascript"&gt;
function setBodyAttr(attr,value){
  if(document.body) eval('document.body.'+attr+'="'+value+'"');
  else notSupported();
}
&lt;/script&gt;
&lt;/head&gt; 
&lt;body&gt;
&lt;div style="margin: .5in; height="400""&gt; 
&lt;p&gt;&lt;b&gt;&lt;tt&gt;text&lt;/tt&gt; color&lt;/p&gt; 
&lt;form&gt; 
&lt;select onChange="setBodyAttr('text',
    this.options[this.selectedIndex].value);"&gt; 
&lt;option value="black"&gt;black 
&lt;option value="darkblue"&gt;darkblue 
&lt;/select&gt;
 &lt;p&gt;&lt;b&gt;&lt;tt&gt;bgColor&lt;/tt&gt;&lt;/p&gt;
 &lt;select onChange="setBodyAttr('bgColor',
    this.options[this.selectedIndex].value);"&gt; 
&lt;option value="white"&gt;white 
&lt;option value="lightgrey"&gt;gray
 &lt;/select&gt;
&lt;p&gt;&lt;b&gt;&lt;tt&gt;link&lt;/tt&gt;&lt;/p&gt; 
&lt;select onChange="setBodyAttr('link',
     this.options[this.selectedIndex].value);"&gt;
&lt;option value="blue"&gt;blue
&lt;option value="green"&gt;green
&lt;/select&gt;  &lt;small&gt;
     &lt;a href="http://www.brownhen.com/dom_api_top.html" id="sample"&gt;
(sample link)&lt;/a&gt;&lt;/small&gt;&lt;br&gt;
&lt;/form&gt;
&lt;form&gt;
  &lt;input type="button" value="version" onclick="ver()" /&gt;
&lt;/form&gt;
&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
</pre>
<p>To test a lot of interfaces in a single page-for example, a "suite" of properties that affect the colors of a web page-you can create a similar test page with a whole console of buttons, textfields, and other HTML elements. The following screenshot gives you some idea of how interfaces can be grouped together for testing.
</p><p><img alt="Image:DOM_Ref_Introduction_to_the_DOM.gif" src="File:it/Media_Gallery/DOM_Ref_Introduction_to_the_DOM.gif"><br>
Figure 0.1 Sample DOM Test Page
</p><p>In this example, the dropdown menus dynamically update such DOM-accessible aspects of the web page as its background color (<code>bgColor</code>), the color of the hyperlinks (<code>aLink</code>), and color of the text (<code>text</code>). However you design your test pages, testing the interfaces as you read about them is an important part of learning how to use the DOM effectively.
</p>{{ wiki.languages( { "fr": "fr/R\u00e9f\u00e9rence_du_DOM_Gecko/Introduction", "pl": "pl/Dokumentacja_Gecko_DOM/Wprowadzenie" } ) }}
Ripristina questa versione