ES6 - HTML DOM

Ogni pagina web risiede all'interno di una finestra del browser, che può essere considerata come un oggetto.

UN document objectrappresenta il documento HTML visualizzato in quella finestra. L'oggetto documento ha varie proprietà che fanno riferimento ad altri oggetti che consentono l'accesso e la modifica del contenuto del documento.

Il modo in cui si accede e si modifica il contenuto di un documento è chiamato Document Object Model, o DOM. Gli oggetti sono organizzati in una gerarchia. Questa struttura gerarchica si applica all'organizzazione degli oggetti in un documento web.

Di seguito è riportata una semplice gerarchia di alcuni oggetti importanti:

Esistono diversi DOM esistenti. Le sezioni seguenti spiegano in dettaglio ciascuno di questi DOM e descrivono come utilizzarli per accedere e modificare il contenuto del documento.

The Legacy DOM- Questo è il modello introdotto nelle prime versioni del linguaggio JavaScript. È ben supportato da tutti i browser, ma consente l'accesso solo a determinate parti chiave dei documenti, come moduli, elementi di modulo e immagini.
The 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.
The IE4 DOM- Questo modello di oggetti documento è stato introdotto nella versione 4 del browser Internet Explorer di Microsoft. IE 5 e le versioni successive includono il supporto per la maggior parte delle funzionalità DOM W3C di base.

Il Legacy DOM

Questo è il modello introdotto nelle prime versioni del linguaggio JavaScript. È ben supportato da tutti i browser, ma consente l'accesso solo a determinate parti chiave dei documenti, come moduli, elementi di modulo e immagini.

Questo modello fornisce diverse proprietà di sola lettura, come title, URL e lastModified forniscono informazioni sul documento nel suo insieme. Oltre a ciò, ci sono vari metodi forniti da questo modello che possono essere usati per impostare e ottenere i valori delle proprietà del documento.

Proprietà del documento in DOM legacy

Di seguito è riportato un elenco delle proprietà del documento a cui è possibile accedere utilizzando Legacy DOM.

Suor n	Proprietà e descrizione
1	alinkColor Deprecato: una stringa che specifica il colore dei collegamenti attivati. Example : document.alinkColor
2	anchors[ ] Un array di oggetti di ancoraggio, uno per ogni ancoraggio visualizzato nel documento. Example : document.anchors [0], document.anchors [1] e così via
3	applets[ ] Un array di oggetti applet, uno per ogni applet che appare nel documento. Example : document.applets [0], document.applets [1] e così via
4	bgColor Deprecato: una stringa che specifica il colore di sfondo del documento. Example : document.bgColor
5	Cookie Una proprietà con valori di stringa con un comportamento speciale che consente di interrogare e impostare i cookie associati a questo documento. Example : document.cookie
6	Domain Una stringa che specifica il dominio Internet da cui proviene il documento. Utilizzato per motivi di sicurezza. Example : document.domain
7	embeds[ ] Un array di oggetti che rappresentano i dati incorporati nel documento con il tag <embed>. Un sinonimo di plugin []. Alcuni plugin e controlli ActiveX possono essere controllati con codice JavaScript. Example : document.embeds [0], document.embeds [1] e così via
8	fgColor Una stringa che specifica il colore del testo predefinito per il documento. Example : document.fgColor
9	forms[ ] Un array di oggetti modulo, uno per ogni modulo HTML visualizzato nel documento. Example : document.forms [0], document.forms [1] e così via
10	images[ ] Un array di oggetti modulo, uno per ogni modulo HTML visualizzato nel documento con il tag HTML <img>. Example : document.forms [0], document.forms [1] e così via
11	lastModified Una stringa di sola lettura che specifica la data della modifica più recente al documento. Example : document.lastModified
12	linkColor Deprecato: una stringa che specifica il colore dei collegamenti non visitati. Example : document.linkColor
13	links[ ] È un array di collegamenti al documento. Example : document.links [0], document.links [1] e così via
14	Location L'URL del documento. Deprecato a favore della proprietà URL. Example : document.location
15	plugins[ ] Un sinonimo per gli incorporamenti [] Example : document.plugins [0], document.plugins [1] e così via
16	Referrer Una stringa di sola lettura che contiene l'URL del documento, se presente, da cui è stato collegato il documento corrente. Example : document.referrer
17	Title Il contenuto del testo del tag <title>. Example : titolo del documento
18	URL Una stringa di sola lettura che specifica l'URL del documento. Example : document.URL
19	vlinkColor Deprecato: una stringa che specifica il colore dei collegamenti visitati. Example : document.vlinkColor

Metodi del documento nel DOM legacy

Di seguito è riportato un elenco di metodi supportati da Legacy DOM.

Suor n	Proprietà e descrizione
1	clear( ) Deprecato: cancella il contenuto del documento e non restituisce nulla. Example : document.clear ()
2	close( ) Chiude un flusso di documenti aperto con il metodo open () e non restituisce nulla.
3	open( ) Elimina il contenuto del documento esistente e apre un flusso in cui è possibile scrivere il nuovo contenuto del documento. Non restituisce nulla. Example : document.open ()
4	write( value, ...) Inserisce la stringa o le stringhe specificate nel documento attualmente in fase di analisi o le aggiunge al documento aperto con open (). Non restituisce nulla. Example : document.write (valore, ...)
5	writeln( value, ...) Identico a write (), tranne per il fatto che aggiunge un carattere di nuova riga all'output. Non restituisce nulla. Example : document.writeln (valore, ...)

Possiamo individuare qualsiasi elemento HTML all'interno di qualsiasi documento HTML utilizzando HTML DOM. Ad esempio, se un documento Web contiene un elemento del modulo, quindi utilizzando JavaScript, possiamo fare riferimento ad esso come document.forms [0]. Se il documento Web include due elementi del modulo, il primo modulo viene indicato come document.forms [0] e il secondo come document.forms [1].

Usando la gerarchia e le proprietà date sopra, possiamo accedere al primo elemento del form usando document.forms [0] .elements [0] e così via.

Esempio

Di seguito è riportato un esempio per accedere alle proprietà del documento utilizzando il metodo DOM legacy.

<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>

Produzione

Il seguente output viene visualizzato in caso di corretta esecuzione del codice precedente.

Note- Questo esempio restituisce gli oggetti per moduli ed elementi. Dovremmo accedere ai loro valori utilizzando quelle proprietà dell'oggetto che non sono discusse in questo tutorial.