JavaScript/Oggetto document: differenze tra le versioni
m + images |
m + moduli |
||
| Riga 42: | Riga 42: | ||
Tra le proprietà del documento HTML la più rilevante è <code>document.title</code>, che permette di accedere al titolo del documento (etichetta <code><title&t;</code>. |
Tra le proprietà del documento HTML la più rilevante è <code>document.title</code>, che permette di accedere al titolo del documento (etichetta <code><title&t;</code>. |
||
== Accedere ai link nella pagina == |
|||
Il primo attributo che ci permette realmente di accedere agli elementi della pagina è l'array <code>links</code> che restituisce un riferimento agli oggetti <a> presenti nel documento: |
Il primo attributo che ci permette realmente di accedere agli elementi della pagina è l'array <code>links</code> che restituisce un riferimento agli oggetti <a> presenti nel documento: |
||
<source lang=javascript>var l = document.links[0]; //restituisce un riferimento al primo link nella pagina |
<source lang=javascript>var l = document.links[0]; //restituisce un riferimento al primo link nella pagina |
||
| Riga 69: | Riga 69: | ||
L'oggetto <code>image</code> espone come proprietà gli attributi di qualsiasi immagine HTML, come <code>src</code>, <code>border</code>, ecc... Presenta inoltre un'interessate proprietà <code>complete</code> che restituisce true se l'immagine è già stata caricata dal browser. |
L'oggetto <code>image</code> espone come proprietà gli attributi di qualsiasi immagine HTML, come <code>src</code>, <code>border</code>, ecc... Presenta inoltre un'interessate proprietà <code>complete</code> 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 <code>document.forms[]</code> 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: |
|||
<source lang=javascript> |
|||
document.forms[0] //accede al primo form nella pagina |
|||
document.forms["dati"] //accede al form con name="dati" |
|||
document.dati //forma abbreviata |
|||
</source> |
|||
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 aniticipare il normale invio dei dati: |
|||
<source lang=html4strict> |
|||
<form name="opz"> |
|||
<select name="opzione" onchange="document.opz.submit()"> |
|||
<option value="modifica">modifica</option> |
|||
<option value="elimina">elimina</option> |
|||
<option value="...">...</option> |
|||
</select> |
|||
</form> |
|||
</source> |
|||
In questo modo il form si invia automaticamente quando l'utente sceglie un'opzione dal menu a discesa, senza l'utilizza del pulsante di invio. |
|||
L'oggetto presenta anche alcune proprietà corrispondenti agli attributi dell'oggetto HTML <form>, quali '''action''', '''encoding''', '''method''', '''name''' e '''target'''.<br/> |
|||
Presenta infine l'utile array <code>elements[]</code> che permette di accedere agli elementi del form: |
|||
<source lang=javascript> |
|||
document.dati.elements[0] //accede al primo elemento del form |
|||
document.dati.elements["opzione"] //accede al campo con name="opzione" |
|||
document.dati.opzione //forma abbreviata |
|||
</source> |
|||
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''. |
|||
[[Categoria:JavaScript|Oggetto document]] |
[[Categoria:JavaScript|Oggetto document]] |
||
Versione delle 17:41, 11 nov 2007
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 usando blocchi <script> all'interno del <body>, le informazioni si inseriscono nel punto in cui è presente lo script
Ad esempio:
<body>
<p>Testo<br />
<script type="application/x-javascript">
document.write('<a href="pagina.html">link</a>');
</script>
Testo</p>
</body>
genererà il codice:
<body>
<p>Testo<br /><a href="pagina.html">link</a>
Testo</p>
</body>
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&t;.
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:
var l = document.links[0]; //restituisce un riferimento al primo link nella pagina
alert('Nella pagina ci sono ' + document.links.length + ' link'); //ricordiamoci che è un array
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'URLpathname: indica il percorso oggetto indicato dell'URLport: indica la porta dell'URLprotocol: 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:
for (i in document.links) {
document.links[i].target = "_blank"; //imposta l'attributo target
}
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:
<img name="logo" src="logo.png" width="130px" height="130px" />
Possiamo accedere a quell'immagine tramite l'indice numerico oppure tramite il nome, in questo modo:
document.images["logo"]
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:
document.forms[0] //accede al primo form nella pagina
document.forms["dati"] //accede al form con name="dati"
document.dati //forma abbreviata
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 aniticipare il normale invio dei dati:
<form name="opz">
<select name="opzione" onchange="document.opz.submit()">
<option value="modifica">modifica</option>
<option value="elimina">elimina</option>
<option value="...">...</option>
</select>
</form>
In questo modo il form si invia automaticamente quando l'utente sceglie un'opzione dal menu a discesa, senza l'utilizza del pulsante di invio.
L'oggetto presenta anche alcune proprietà corrispondenti agli attributi dell'oggetto HTML <form>, quali action, encoding, method, name e target.
Presenta infine l'utile array elements[] che permette di accedere agli elementi del form:
document.dati.elements[0] //accede al primo elemento del form
document.dati.elements["opzione"] //accede al campo con name="opzione"
document.dati.opzione //forma abbreviata
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.