JavaScript/Oggetto document: differenze tra le versioni

Wikibooks, manuali e libri di testo liberi.
Contenuto cancellato Contenuto aggiunto
Ramac (discussione | contributi)
metodi
Ramac (discussione | contributi)
+ 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>&lt;body&gt;</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>&lt;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 &lt;a&gt; 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

Indice del libro

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
}