JavaScript/Oggetto document: differenze tra le versioni
metodi |
+ proprietà + links |
||
Riga 1: | Riga 1: | ||
{{JavaScript}} |
{{JavaScript}} |
||
Oltre alle proprietà elencate nel [[JavaScript/BOM|modulo precedente]], l'oggetto globale <code>window</code> espone altre importanti proprietà, tra le quali '''l'oggetto <code>window.document<code>'''. |
Oltre alle proprietà elencate nel [[JavaScript/BOM|modulo precedente]], l'oggetto globale <code>window</code> espone altre importanti proprietà, tra le quali '''l'oggetto <code>window.document<code>'''. |
||
<br/>Questo oggetto permette di ottenere un riferimento al documento HTML e agli elementi in essa contenuti. |
<br/>Questo oggetto permette di ottenere un riferimento al documento [[w:HTML|HTML]] e agli elementi in essa contenuti. |
||
== Metodi == |
|||
L'oggetto espone solo pochi 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 |
* '''open()''' e '''close()''' rispettivamente aprono e chiudono un flusso di informazioni per l'uso dei metodi elencati sotto |
||
Riga 29: | Riga 30: | ||
</source> |
</source> |
||
== Proprietà == |
|||
Le proprietà dell'oggetto document possono essere relative: |
|||
* agli attributi dell'elemento <code><body></code> della pagina |
|||
* al contenuto vero e proprio del corpo del documento |
|||
* altre proprietà del documento HTML |
|||
Nel primo gruppo, troviamo proprietà come: |
|||
* <code>fgColor</code> e <code>bgColor</code>: indicano rispettivamente il colore di primo piano e di sfondo della pagina. Corrispondono agli attributi <code>text</code> e <code>background</code>. |
|||
* <code>linkColor</code>, <code>alinkColor</code>, <code>valinkColor</code>: il colore rispettivamente dei [[w:Link|link]] allo stato normale, dei collegamenti attivi e dei collegamenti visitati. Corrisponde agli attributi HTML <code>link</code>, <code>alink</code> e <code>vlink</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: |
|||
<source lang=javascript>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</source> |
|||
Ciascun oggetto link presenta le seguenti proprietà: |
|||
* <code>href</code>: restituisce o imposta il valore dell'attributo <code>href</code> del link. A partire da esso derivano alcuni attributi relativi all'URL a cui punta il link: |
|||
** <code>hostname</code>: indica il nome dell'[[w:Host|host]] dell'[[w:URL|URL]] |
|||
** <code>pathname</code>: indica il percorso oggetto indicato dell'URL |
|||
** <code>port</code>: indica la porta dell'URL |
|||
** <code>protocol</code>: indica il protocollo della risorsa a cui punta l'URL (per esempio [[w:FTP|FTP]] o [[w:HTTP|HTTP]]) |
|||
** <code>search</code>: restituisce l'eventuale ''querystring'' (ad esempio <code>pagina.htm?'''name=Mario&cognome=Rossi'''</code>) |
|||
* <code>target</code>: il valore dell'attributo <code>target</code> del link |
|||
Ad esempio possiamo decidere di impostare il target di tutti i link nella pagina a <code>_blank</code>: |
|||
<source lang=javascript> |
|||
for (i in document.links) { |
|||
document.links[i].target = "_blank"; //imposta l'attributo target |
|||
} |
|||
</source> |
|||
[[Categoria:JavaScript|Oggetto document]] |
[[Categoria:JavaScript|Oggetto document]] |
Versione delle 13:46, 17 ott 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'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
:
for (i in document.links) {
document.links[i].target = "_blank"; //imposta l'attributo target
}