# JavaScript/Oggetto document

JavaScript
Copertina Tutti i moduli · Sviluppo
* IntroduzioneJavaScript/Introduzione
* Il nostro primo programmaJavaScript/Il nostro primo programma
* Tipi di dati e variabiliJavaScript/Tipi di dati e variabili
* Operatori e castingJavaScript/Operatori e casting
* Le strutture di controllo
** SelezioneJavaScript/Selezione
** IterazioneJavaScript/Iterazione
* Funzioni definite dall'utenteJavaScript/Funzioni definite dall'utente
* Programmazione ad oggettiJavaScript/Oggetti
** Oggetto StringJavaScript/Oggetto String
** Oggetto MathJavaScript/Oggetto Math
** Oggetto DateJavaScript/Oggetto Date
** Oggetto ArrayJavaScript/Oggetto Array
* CookieJavaScript/Cookie
* TimerJavaScript/Timer
* L'oggetto windowJavaScript/BOM
** Gli eventi nel BOMJavaScript/Gli eventi nel BOM
** Oggetto documentJavaScript/Oggetto document
** Altri oggetti del BOMJavaScript/Altri oggetti del BOM
* Il Document Object ModelJavaScript/DOM
** Proprietà e metodiJavaScript/Proprietà e metodi del DOM
** Gli eventi nel DOMJavaScript/Gli eventi nel DOM
* Espressioni regolariJavaScript/Espressioni regolari
* AJAX
** Introduzione ad AJAXJavaScript/Introduzione ad AJAX
** Usare AJAXJavaScript/Usare AJAX
* Costruttori e prototipiJavaScript/Costruttori e prototipi
* AppendiceJavaScript/Appendice
* CreditiJavaScript/Crediti
Modifica il sommario
Oltre alle proprietà elencate nel modulo precedente, l'oggetto globale window espone altre importanti proprietà, tra le quali l'oggetto window.document.
Questo oggetto permette di ottenere un riferimento al documento HTML e agli elementi in essa contenuti.

## Metodi

L'oggetto espone solo pochi metodi:
* open e close rispettivamente aprono e chiudono un flusso di informazioni per l'uso dei metodi elencati sotto
* write e writeln scrivono nella pagina la stringa (formattata in HTML) passata come parametro:
** se la pagina è già stata caricata:
*** se è stato aperto il flusso di informazioni, il testo verrà inserito alla fine della pagina
*** se il flusso non è stato aperto, il testo sostituirà il testo della pagina
** se la pagina non è ancora stata caricata, se si usano blocchi <script> all'interno del <body>, le informazioni si inseriscono nel punto in cui è presente lo script
Ad esempio:
genererà il codice:

## Proprietà

Le proprietà dell'oggetto document possono essere relative:
* agli attributi dell'elemento <body> della pagina
* al contenuto vero e proprio del corpo del documento
* altre proprietà del documento HTML
Nel primo gruppo, troviamo proprietà come:
* fgColor e bgColor: indicano rispettivamente il colore di primo piano e di sfondo della pagina. Corrispondono agli attributi text e background.
* linkColor, alinkColor, valinkColor: il colore rispettivamente dei link allo stato normale, dei collegamenti attivi e dei collegamenti visitati. Corrisponde agli attributi HTML link, alink e vlink.
Tra le proprietà del documento HTML la più rilevante è document.title, che permette di accedere al titolo del documento (etichetta <title>.

## Accedere ai link nella pagina

Il primo attributo che ci permette realmente di accedere agli elementi della pagina è l'array links che restituisce un riferimento agli oggetti <a> presenti nel documento:
Ciascun oggetto link presenta le seguenti proprietà:
* href: restituisce o imposta il valore dell'attributo href del link. A partire da esso derivano alcuni attributi relativi all'URL a cui punta il link:
** hostname: indica il nome dell'host dell'URL
** pathname: indica il percorso oggetto indicato dell'URL
** port: indica la porta dell'URL
** protocol: indica il protocollo della risorsa a cui punta l'URL (per esempio FTP o HTTP)
** search: restituisce l'eventuale querystring (ad esempio pagina.htm?name=Mario&cognome=Rossi)
* target: il valore dell'attributo target del link
Ad esempio possiamo decidere di impostare il target di tutti i link nella pagina a _blank:

## L'array images

Analogamente all'array links, esiste anche un array images che permette di accedere a tutte le immagini presenti nella pagina. Rispetto a links, questo array presenta una differenza: è possibile accedere agli elementi della pagina anche attraverso il loro attributo name. Ad esempio:
Possiamo accedere a quell'immagine tramite l'indice numerico oppure tramite il nome, in questo modo:
L'oggetto image espone come proprietà gli attributi di qualsiasi immagine HTML, come src, border, ecc... Presenta inoltre un'interessate proprietà complete che restituisce true se l'immagine è già stata caricata dal browser.

## Accedere ai moduli

Per ultimo trattiamo, in quanto introduce un argomento piuttosto vasto, l'array document.forms che, come si potrà facilmente intuire, permette di accedere a tutti gli elementi <form> nella pagina (moduli HTML).
Per accedere a ciascun form nella pagina possiamo utilizzare tre metodi:
Il metodo presenta due interessanti metodi:
* reset che resetta i valori dei campi nei moduli (come cliccare sul pulsante "reset" del form)
* submit invece invia il form (come cliccare sul pulsante "submit" o "invia" del modulo)
Questo da la possibilità di inviare il modulo, per esempio al semplice click di un collegamento oppure di anticipare il normale invio dei dati:
In questo modo il form si invia automaticamente quando l'utente sceglie un'opzione dal menu a discesa, senza l'utilizzazione del pulsante di invio.
L'oggetto presenta anche alcune proprietà corrispondenti agli attributi dell'oggetto HTML <form>, quali action, encoding, method, name e target.

### I campi dei moduli

Analizziamo infine, tra le proprietà dell'oggetto form, l'utile array elements che permette di accedere a tutti i campi contenuti form:
L'oggetto restituito da questo array dipende dal tipo di oggetto a cui accede: potrà essere un campo di testo, un pulsante oppure una textarea. Tuttavia tutti i campi condividono:
* una proprietà form che restituisce un rimando al form genitore;
* una proprietà value che permette di ottenere o impostare al valore del campo, in modo diverso a secondo dei singoli tipi di campo;
* la proprietà type che ne specifica il tipo;
* la proprietà name che ne restituisce il nome (attributo HTML name );
* due metodi focus e blur che rispettivamente attribuiscono e tolgono il focus dall'elemento

#### Caselle di testo

Questi elementi sono creati utilizzando il tag HTML <input> impostando l'attributo type ai valori text, password o hidden: la differenza è che il secondo mostra degli asterischi al posto dei caratteri reali e il terzo è invisibile, ma noi li tratteremo insieme in quanto condividono proprietà e metodi.
Questi tre tipi di moduli restituiscono come attributo type il valore rispettivamente text, password e hidden. Hanno poi due proprietà, size e maxlength, che corrispondono ai rispettivi attributi HTML.
Per quanto riguarda i metodi, invece, presentano select, che seleziona l'intero testo contenuto nel campo (ovviamente non serve per i campi di testo nascosti).
L'evento associato normalmente a questi campi è onchange, che viene chiamato dopo la modifica del valore nel campo.

#### Aree di testo

Le aree di testo sono create tramite l'utilizzo del tag HTML <textarea> e sono rappresentante dall'omonimo oggetto textarea in JavaScript.
Questi oggetti presentano proprietà analoghe ai campi di testo: value imposta o restituisce il valore della casella di testo, rows e cols corrispondono ai rispettivi attributi HTML. L'oggetto textarea permette di inserire anche degli "a capo" nel testo, ma in questo caso bisogna stare attenti, in quanto il carattere di accapo è espresso diversamente a seconda del sistema operativo in uso: su Windows è \n\r, su Linux è \n mentre su Mac è \r (\ è il carattere di commutazione visto in precedenza per gli apici singoli e doppi).

#### Pulsanti

Per quanto riguarda i pulsanti dei moduli, questi possono essere di tre tipi: submit, reset e button; tuttavia espongono lo stesso modello oggetto, che in realtà è molto semplice, in quanto non presenta proprietà o metodi particolari oltre a quelli condivisi da tutti i campi di modulo.
L'utilizzo di JavaScript con questi pulsanti è più che altro legato agli eventi del mouse (analizzati nel modulo precedente).

#### Pulsanti di opzione

Iniziamo ad analizzare ora alcuni elementi più complicati: i checkbox e i pulsanti radio (corrispondono rispettivamente ad <input type="checkbox" /> e <input type="radio" />).
Nel primo la proprietà più utile non è value come negli altri casi, bensì checked che indica se la casella è stata marcata o meno.
Per quanto riguarda i radio, il discorso è simile, ma bisogna anche considerare che diversi elementi di opzione normalmente condividono lo stesso attributo name; per accedere quindi ai singoli elementi è necessario quindi appoggiarsi ad un array:

#### Liste

Analizziamo per ultimo gli elementi <select>, che servono per creare liste e menu a tendina. Prendiamo il seguente spezzone di codice HTML in un ipotetico form chiamato "dati":
Questo codice crea un oggetto select accessibile come sempre con la sintassi document.dati.città. Questo espone alcune proprietà interessanti:
* value è il valore del campo del modulo (nel nostro caso potrà essere mi, to, ecc...)
* options è un array contenente un riferimento a ciascun oggetto option appartenente all'elenco
* selectedIndex restituisce l'indice dell'elemento selezionato dall'utente (Milano sarà 0, Torino 1, ecc.)
Ogni oggetto option espone le seguenti proprietà:
* value indica il suo valore
* text indica il testo che mostrerà all'utente
* index restituisce la sua posizione nell'array.
Ad esempio, associamo all'evento onchange del campo "città" alla seguente funzione:
Cliccando su ciascuna opzione otterremo così un'alertbox contenente la città selezionata.

##### Inserire e aggiungere elementi

Per inserire o aggiungere nuovi elementi è sufficiente creare un nuovo oggetto option e assegnarlo ad una posizione dell'array:
L'esempio appena visto aggiunge la città "Bologna" come primo elemento della lista. Il browser si occuperà poi di far scalare le posizioni degli altri elementi dell'array. Per eliminare un'opzione è sufficiente assegnare all'elemento dell'array il valore null:
La seguente funzione aggiunge una città come ultimo elemento nella lista: