JavaScript/Oggetto document: differenze tra le versioni

Naviga nella cronologia in modo interattivo

← Differenza precedente Differenza successiva →

Contenuto cancellato Contenuto aggiunto

VisualeWikitesto

In linea

Versione delle 21:01, 19 ott 2007

JavaScript

Copertina

Tutti i moduli · Sviluppo

Versione in PDF

versione stampabile

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

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.

@@ Riga 60: / Riga 60: @@
 }
 </source>
+== L'array images ==
+Analogamente all'array <code>links</code>, esiste anche un array <code>images</code> che permette di accedere a tutte le immagini presenti nella pagina.<br/>
+Rispetto a <code>links</code>, questo array presenta una differenza: è possibile accedere agli elementi della pagina anche attraverso il loro attributo <code>name</code>. Ad esempio:
+<source lang=html4strict><img name="logo" src="logo.png" width="130px" height="130px" /></source>
+Possiamo accedere a quell'immagine tramite l'indice numerico oppure tramite il nome, in questo modo:
+<source lang=javascript>document.images["logo"]</source>
+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.
 [[Categoria:JavaScript|Oggetto document]]