In questo articolo vedremo alcuni oggetti che fanno parte del DOM e che incontriamo facilmente sviluppando con JavaScript per il Web. Possiamo immaginare la pagina HTML formata da alcuni elementi in varia relazione fra loro. Il browser infatti (con all'interno il documento HTML) può essere infatti "sezionato" in varie parti:
| Oggetto | Descrizione |
|---|---|
| navigator | Eappresenta il browser stesso |
| window | È la finestra che contiene tutto quanto |
| document | È il documento HTML vero e proprio |
| document.forms["nomeForm"] | Sono i moduli per raccogliere l'input dell'utente |
| document.images["nomeImmagine"] | Le immagini |
| document.cookie["nomeCookie"] | I cookie |
| document.getElementById("idElemento") | gli elementi della pagina definiti con attributo id |
| location | La barra degli indirizzi |
| status | La barra di stato, nella parte bassa del browser |
| window.frames | contiene gli eventuali frames |
| document.applets["nomeApplet"] | Le applet |
Ce ne sono molti altri e tutti gli oggetti presenti vediamo nel browser sono in relazione gerarchica fra di loro (ci sono elementi-padre ed elementi-figlo). Grazie a JavaScript possiamo interrogare questi elementi, leggerne le proprietà e in taluni casi anche modificarne il valore.
Facciamo un esempio. Prendiamo il seguente codice HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Esempio</title>
</head>
<body>
<forum name="mioForm">
<input type="text" name="testoProva" value="paradiclorobenzoro">
</form>
</body>
</html>La pagina contiene un campo di input di tipo text (che in genere serve all'utente per scrivere dei dati). Per conoscere la lunghezza del testo contenuto nel modulo, utilizzando il modello a oggetti e le proprietà utilizzate da JavaScript, scriviamo:
document.mioForm.testoProva.value.lengthche è un modo sintetico di scrivere:
window.document.forms['mioForm'].testoProva.value.lengthLa riga che abbiamo scritto precedentemente significa:
"prendiamo la finestra del browser, consideriamo il documento attuale, consideriamo i form presenti nel documento e facciamo riferimento a quello che si chiama mioForm, consideriamo poi il campo chiamato testoProva. Una volta individuato testoProva, prendiamo il valore di questo campo e infine ricaviamo la lunghezza del valore di questo campo.
Infatti se scriviamo un codice come questo:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Esempio</title>
</head>
<body onLoad="alert(document.mioForm.testoProva.value.length)">
<form name="mioForm">
<input type="text" name="testoProva" value="paradiclorobenzoro">
</form>
</body>
</html>al caricamento della pagina vedremo un messaggio che indica la lunghezza di paradiclorobenzoro (18).
Non vi preoccupate se l'esempio adesso non è del tutto chiaro: esamineremo subito nelle prossime pagine la sintassi introdotta nelle righe di codice scritte poc'anzi (vedremo subito cosa significano le parole onLoad e alert).
L'importante è comprendere il concetto, che cioè una pagina Web viene scomposta da JavaScript in un modello ad oggetti (ognuno con le sue proprietà) in relazione reciproca.
Ovviamente la sintassi per richiamare gli oggetti non è dovuta al nostro estro, ma - visto che JavaScript ha la struttura di un linguaggio di programmazione - deve essere espressa in maniera rigorosa, secondo la struttura del linguaggio (non potremmo scrivere, ad esempio, document.testoProva.length.mioForm.value senza incorrere in errori).