Argomenti trattati: la gestione del documento e dei suoi elementi.
L'oggetto document merita un'attenzione particolare, poiché esso rappresenta il documento HTML e tutto ciò che si trova all'interno del tag <BODY></BODY>.
Le proprietà fondamentali sono le seguenti:
| Proprietà generali dell'oggetto document: | |
|---|---|
| title | Il titolo del documento |
| body | Il corpo del documento |
| selection | la parte eventualmente selezionata del documento |
| URL | l'indirizzo relativo del documento |
| location | l'URL completo del documento |
| domain | riferimento al dominio del documento |
| cookie | riferimento ad eventuali cookie inviati |
| lastModified | La data di ultima modifica del documento |
| parentWindow | la finestra che contiene il documento |
| refererr | l'url della pagina dalla quale si è arrivati a quella corrente |
Il documento possiede inoltre delle proprietà legate al colore del corpo o del testo in esso contenuto. Esse sono così definite:
|
Proprietà legate al colore del documento: |
|
|---|---|
| bgColor | la proprietà bgcolor del tag body |
| fgColor | la proprietà text del tag body |
| linkColor | la proprietà link del tag body |
| alinkColor | la proprietà alink del tag body |
| vlinkColor | la proprietà vlink del tag body |
Un'altro interessante insieme di proprietà è costituito dalle cosiddette collections,
un termine che deriva dal linguaggio Microsoft e che può essere tradotto come
l'insieme degli elementi dello stesso tipo che risiedono nel corpo del documento.
Si tratta in realtà di una serie di Array, ovvero delle
matrici, che descrivono alcuni elementi tipici del documento.
| Le collezioni dell'oggetto document: | |
|---|---|
| all | Array di tutti i tag nel
documento. Questa proprietà è utilizzata solo con MSIE, scrivendo document.all.nome_elemento o document.all.id_elemento per richiamarlo come oggetto. |
| anchors | Array di tutti i tag
<A> </A> nel documento.
Non sempre funziona, ed è in effetti poco utilizzato. |
| applets | Array di tutti gli oggetti applet nel documento |
| classes | Array di tutte le classi dei fogli di stile nel documento |
| embeds | Array di tutti i tag embed nel documento |
| forms | Array di tutti i form nel documento |
| ids | Array di tutti i tag id nel
documento.
Questa proprietà è utilizzata solo con Navigator, e viene usata in particolar modo con i fogli di stile |
| images | Array di tutti i tag image nel documento. |
| layers | Array di tutti i layer nel
documento. Questa proprietà è utilizzata in
particolar modo con i fogli di stile. I layers sono presenti in Nescape Navigator. |
| links | Array di tutti i tag link nel documento. |
| plugins | Array di tutti i plugins che utilizza il documento |
| scripts | Array di tutti i tag script nel documento |
| styleSheets | Array di tutti i riferimenti ai fogli di stile nel documento |
| tags | Array di tutti i tag nel documento |
E' facile vedere come tutti gli Array prendano la prima lettera minuscola e la "s" finale, tranne il tag all.
Un utile riferimento per comprendere il collegamento tra il documento e gli elementi in esso contenuti è la sezione relativa al DOM.
Tra i metodi principali dell'oggetto document trattiamo:
| metodi dell'oggetto document | |
|---|---|
| document.clear() | viene usato insieme a document.open() e document.close() per cancellare il testo contenuto nel documento in cui è avvenuta una modifica. |
| document.close() | chiude il documento dopo che è stato aggiornato. |
| document.open() | apre un documento per scrivervi all'interno. |
| document.write() | permette di scrivere in un documento. |
| document.writeln() | permette di scrivere in un documento con un ritorno a capo. |
Un esempio che può chiarire l'utilizzo dei metodi esposti è visualizzabile dal sottostante collegamento:
Il codice, tra l'altro semplicissimo, è il seguente:
| function prova1() { /* il metodo open prende come parametro il Type MIME del documento che sta per venire aperto, di nuovo, in questo edsempio, un documento HTML */ document.open("text/html") /* dopo aver aperto un nuovo documento, ci si può scrivere dentro (volendo, anche dei tag HTML) */ document.write("ops!!! riprova ancora...") // il documento viene di nuovo chiuso document.close() // viene garantito l'aggiornamento rispetto al documento precedente document.clear() } |
Lo stesso risultato, nel caso specifico, poteva essere ottenuto con il solo metodo document.write().
Eventi principali supportati da MSIE:
Nel documento HTML gli elementi vengono letti e restituiti nella pagina dal browser, che li legge dall'alto verso il basso, da sinistra verso destra.
L'HTML ha quindi la caratteristica di un posizionamento statico,
dove gli elementi dello stesso tipo sono numerati dall'alto verso il basso a
partire da zero.
Esiste la possibilità di utilizzare il posizionamento dinamico con una serie di interessanti effetti di movimento e di transizione attraverso il DHTML, definito come HTML Dinamico (o Dynamic HTML).
Nel sito è presentata una spiegazione di base relativa al posizionamento dinamico,
mentre si rimanda agli approfondimenti ed ai
collegamenti consigliati per quanto riguarda la sintassi relativa ai
CSS e al loro utilizzo.