document

Javascript:
manipolare e gestire
1
Pasqualetti Veronica
DOM ((Document Object
j
Model))
2
 Il Document Object Model è un interfaccia di
programmazione (API) per documenti sia HTML sia XML.
In parole povere è un insieme di funzioni, metodi e proprietà,
che i programmi possono richiamare al fine di delegare il
lavoro al sistema sottostante.
 Definisce la struttura logica dei documenti ed il modo in cui si
accede
d e sii manipola
i l un d
documento.
 Utilizzando DOM i programmatori possono costruire
documenti,, navigare
g
attraverso la loro struttura,, e
aggiungere, modificare o cancellare elementi.
 Ogni componente di un documento HTML o XML può essere
letto modificato,
letto,
modificato cancellato o aggiunto utilizzando il
Document Object Model.
W3C - World Wide Web Consortium
e DOM
3
 Il DOM è iindipendente
di
d t d
dalla
ll piattaforma
i tt f
 E’ un'interfaccia definita dal W3C per essere lo
strumento universale
i
l per tuttii i creatorii di pagine
i
Web.
 Il DOM definito dal W3C è indipendente dal tipo
di browser, dalla versione e dal sistema operativo.
DOM e JavaScript
p
4
 Il DOM non è una parte
t di JavaScript.
J
S i t Il
JavaScript è solo un modo per accedere al DOM, e
non è ll'unico
unico.
 E’ possibile accedere e manipolare ogni nodo
d l DOM,
del
DOM ma anche
h aggiungerne
i
di nuovii all volo,
l
ed eliminarne altri già presenti. Queste possibilità
s
sono
offerte
ff t d
da ttutti
tti i b
browser
s che
h ssupportano
t
il
DOM W3C.
 Vediamo
V di
cos’è
’è un nodo
d …
Elaborazione DOM (1)
5
<TABLE>
<TBODY>
<TR>
<TD>Shady
Sh d Grove</TD>
G
/
<TD>Aeolian</TD>
</TR>
/
<TR>
<TD>Over the River, Charlie</TD>
<TD>Dorian</TD>
</TR>
</TBODY>
</TABLE>
Elaborazione DOM (2)
6
 Il Document Object Model rappresenta la tabella della
slide precedente in questo modo:
Differenza tra element e node
7
 Un elemento (element) è contraddistinto da un tag,
tag
quindi può contenere altri elementi.
Esempio: si pensi al tag TABLE, che può contenere le righe
e le celle della tabella stessa, e a loro volta questi possono
contenere altri elementi.
 Ill nodo
d (node)
( d ) ha
h un significato
f
semantico più
ù ampio: oltre
l
ad includere nella sua definizione tutti gli elementi, un
nodo può essere anche un testo
testo, o un attributo
attributo, che a
differenza di tutti gli altri nodi non possono avere attributi
e non p
possono contenere altri nodi.


Quindi gli elementi che costituiscono il DOM sono:
document (l'elemento principale), element e node.
"document" è l'elemento che contiene tutti gli altri elementi del
DOM.
Recuperare
p
elementi DOM
8
 getElementById(): permette di recuperare l'elemento
l elemento
caratterizzato univocamente dal valore del proprio
attributo ID. Restituisce un riferimento all'elemento in
questione La sintassi è:
questione.


document.getElementById(ID_elemento)
ID_elemento è, per l'appunto, il valore (univoco) dell'attributo ID
d ll' l
dell'elemento
t che
h sii vuole
l recuperare.
 getElementsByTagName(): permette di recuperare
l'insieme degli
g elementi caratterizzati dallo stesso tag.
g In
particolare ritorna un array di tutti gli elementi del
tag considerato, nell'ordine in cui compaiono nel
codice della pagina. La sintassi è:


document.getElementsByTagName(nome_TAG)
nome_TAG è il nome del Tag di cui si vuole recuperare la lista.
Creare nodi ed elementi DOM
9
 createElement():
() p
permette di creare un nuovo
elemento di qualunque tipo. Ritorna un riferimento al
nuovo elemento creato. La sintassi è:



nuovo_elemento
nuovo
elemento = document.createElement(nome_TAG)
document createElement(nome TAG)
nuovo_elemento è la variabile che conterrà il riferimento al
nuovo elemento creato
nome TAG è il nome del Tag di cui si vuole creare un nuovo
nome_TAG
elemento
 createTextNode(): permette di creare un nuovo
nodo di testo.
testo La sintassi è:



nuovo_testo = document.createTextNode(testo_da_inserire)
nuovo_testo è la variabile che conterrà il riferimento al nuovo
nodo
testo_da_inserire è la stringa di testo da inserire nel nuovo
nodo
Creare un nodo …
10
 C
C'èè differenza tra creare un nuovo nodo ed inserirlo nella
pagina. Esiste infatti un set di metodi che serve per sistemare i
nuovi nodi esattamente dove desideriamo.
 Supponiamo di voler creare un nuovo nodo di testo e di
volerlo appendere alla fine di un div con id=par
if(document getElementById && document.createTextNode)
if(document.getElementById
document createTextNode)
{
// inanzitutto creiamo un nuovo nodo di testo
frase = document.createTextNode(“esempio
semplice");
// poi,
i recuperiamo
i
l'elemento
l' l
t con ID = par e
appendiamoci il nodo di testo appena creato
document.getElementById("par").appendChild(frase);
g
y ( p ) pp
(
); }
Alcuni
cu metodi
etod pe
per appe
appendere
de e o rimuovere
uo e e nodi
od
11
 appendChild: inserisce un nuovo nodo alla fine della lista
dei figli del nodo al quale è applicato. La sintassi è:


node.appendChild(nodo)
nodo è,
è per l'appunto
l appunto, il nodo che si vuole appendere
 replaceChild: inserisce un nuovo nodo al posto di un altro
nella struttura della pagina. La sua sintassi è:



node.replaceChild(nuovo_nodo,vecchio_nodo)
d
l Child(
d
hi
d )
nuovo_nodo è il nuovo nodo che si vuole inserire al posto del vecchio
vecchio_nodo è il nodo che si vuole rimpiazzare con il nuovo
 removeChild:
hild elimina
li i e restituisce
i i
il nodo
d specificato
ifi
dalla
d ll
lista dei figli del nodo al quale è applicato. La sua sintassi è:


node.removeChild(nodo_da_rimuovere)
nodo_da_rimuovere è il nuovo nodo che viene rimosso e restituito
dal metodo
Alcuni metodi p
per manipolare
p
elementi ((1/2)
/ )
12
 getElementsByTagName:
tEl
t B T N
ritorna
it
lla li
lista
t d
degli
li
elementi contenuti all'interno di un certo elemento.
 setAttribute:
A ib
permette di creare un nuovo attributo
ib
all'elemento specificato. Qualora l'attributo sia già
presente,
t il metodo
t d sovrappone il nuovo valore
l
all'attributo in questione. La sintassi è:



element.setAttribute(nome_attributo,
l
t tAtt ib t (
tt ib t valore_attributo)
l
tt ib t )
nome_attributo (stringa) è il nome dell'attributo che deve
essere inserito o modificato
valore_attributo (stringa) è il valore cui impostare
l'attributo specificato
Alcuni metodi p
per manipolare
p
elementi ((2/2)
/ )
13
 getAttribute:
tAtt ib t recupera il valore
l
di un attributo
tt ib t
dell'elemento. La sintassi è:


element.getAttribute(nome_attributo)
l
t tAtt ib t (
tt ib t )
nome_attributo (stringa) è il nome dell'attributo di cui si
vuole recuperare il valore
 removeAttribute: rimuove l'attributo passato
come parametro.
parametro La sintassi è:


element.removeAttribute(nome_attributo)
nome attributo (stringa) è il nome dell
nome_attributo
dell'attributo
attributo che si
vuole eliminare
Specifiche
Spec
c e DOM
O e oggett
oggetti Ja
JavaScript
aSc pt pe
per il DOM
O
14
 Per
P maggiori
i i approfondimenti
f di
ti sull DOM sii rimanda
i
d
alla documentazione ufficiale W3C
http://www w3 org/DOM/
http://www.w3.org/DOM/
 In JavaScript troviamo un insieme di oggetti specifici
per la
l manipolazione
i l i
DOM
DOM:




Window
D
Document
t
Form
Frame (Window.Frame)
(Window Frame)
Oggetto
gg
Window
15
 Questo
Q t oggetto
tt rappresenta
t la
l fi
finestra
t iin cuii il
documento corrente viene visualizzato
 Una ffunzione
i
può
ò accedere
d
alle
ll proprietà
i àd
della
ll
finestra corrente, ma può creare e manipolare nuove
fi
finestre
t ((pop-up))
Oggetto
gg
Window: p
proprietà
p
16
P
Proprietà
i tà
 title titolo della finestra
 statusbar
t t b testo
t t mostrato
t t sulla
ll b
barra di stato
t t
 location URL del documento visualizzato
 outerHeight,
outerHeight outerWidth dimensioni esterne
 innerHeight, innerWidth dimensioni interne
Oggetto
gg
Window: esempi
p
17
 Modificare
M difi
il tit
titolo
l d
della
ll fi
finestra
t corrente
t
window.title = “Questo è il nuovo titolo”;
 Accedere
A d
ad
d un nuovo d
documento
window.location =“http://www.yahoo.com/”;
 Calcolare l’area in pixel della finestra
var area = window.innerWidth*window.innerHeight;
Oggetto
gg
Window: metodi
18
M
Metodi
t di
 open(location, title) apre una nuova finestra
 alert(message)
l t(
) visualizza
i
li
il messaggio
i in
i una finestra
fi
t di
dialogo (utile per il debug)
 confirm(message) visualizza il messaggio e richiede una
conferma all’utente
 moveTo(x, y) sposta la finestra alle coordinate indicate
 resizeTo(width, height) dimensiona la finestra
Oggetto
gg
Window: altre p
proprietà
p
19
 Parent.
Parent Restituisce ll'oggetto
oggetto Window della finestra superiore
(gerarchicamente) ,se la finestra superiore è la corrente,
parent restituirà la pagina corrente.
 Self. Restituisce l'oggetto window corrente.
 Top. Restituisce l'oggetto window principale.
 Frame.
F
R tit i
Restituisce
una matrice
t i di fframe contenuti
t
ti nella
ll
finestra corrente. Gli oggetti Frame hanno le stesse proprietà
dell'oggetto
gg
window.
Window.Frames(1).Location.href =http://pro.html.it
Window.Frames.Count //num. di frame in una pagina
Oggetto
gg
Window.Frame
20
 Javascript rappresenta un frame usando un oggetto window.
window Ogni
frame object è un oggetto window, e ha tutti i metodi e le proprietà
di un oggetto window.
C'è un esiguo numero di piccole differenze tra una finestra che è un
frame e una finestra di massimo livello (top level window).
Per una
na finestra di massimo livello,
li ello le proprietà parent e top si
riferiscono alla finestra stessa. Per un frame, top si riferisce alla
finestra di massimo livello del browser, e parent si riferisce alla
finestra parente della finestra corrente.
corrente
Oggetto
gg
Window: esempi
p ((1/2)
/ )
21
 Creazione e posizionamento di una nuova finestra
var w =
window.open( http://www.google.com/ ,
window.open(“http://www.google.com/”,
“Google”);
w.moveTo(0, 0);
 Visualizzazione di un messaggio
window.alert(“Attenzione si è verificato un
errore”);
”)
Oggetto
gg
Window: esempi
p ((2/2)
/ )
22
 Visualizzazione del browser in uso
window.alert(“Sei connesso con ” +
navigator.appName + “ versione ” +
navigator version);
navigator.version);
 Richiesta conferma all’utente
if(confirm(“Vuoi proseguire con l’operazione?”)) {
//L’utente
//L
utente ha risposto SI
…
}
else {
//L’utente ha risposto NO
…
}
Oggetto
gg
Document
23
 Rappresenta
R
t il d
documento
t HTML che
h costituisce
tit i
lla
pagina visualizzata
 Non è possibile accedere a tutti gli elementi del
documento
 Tuttavia è possibile accedere agli elementi dei moduli
(form) ed alle proprietà di visualizzazione
 E
E’ possibile costruire on-the-fly
on the fly il documento prima che
questo sia stato completamente caricato e visualizzato
Oggetto
gg
Document
24
 Proprietà
 bgColor colore dello sfondo
 fgColor colore del testo
 forms vettore dei moduli presenti nella pagina
 title titolo del documento
 URL indirizzo del documento
 Metodi
 write(string) accoda string al documento, serve per la
costruzione on-the-fly
Oggetto
gg
Document: esempi
p ((1/2)
/ )
25
 Supponendo che nel documento HTML sia definito un
modulo di nome modulo
<FORM NAME=
NAME “modulo”
modulo …>
>
…
</FORM>
 Si può accedere a tale oggetto in due diversi modi
document.forms[“modulo”];
document.modulo;
 Ciò è possibile, in generale, per tutti gli elementi del
documento con un attributo NAME
Oggetto
gg
Document: esempi
p ((2/2)
/ )
26
 Dal
D l momento
t che
h lla proprietà
i tà forms
f
è di tipo
ti Array
A
è
possibile accedervi anche tramite l’indice numerico
dell elemento
dell’elemento
for(var i=0; i<document.forms.length; i++){
//Accedi a document.forms[i]
document forms[i]
... = document.forms[i];
...
}
Oggetto
gg
Form
27
 Un
U oggetto
tt di questo
t ti
tipo corrisponde
i
d ad
d un modulo
d l
all’interno di una pagina HTML
 Tramite
i lle proprietà
i à di questo oggetto è possibile
ibil
accedere ai diversi elementi (o controlli) del modulo
(i
(inputbox,
tb
li tb
listbox,
checkbox,
h kb
ecc.))
Oggetto
gg
Form: p
proprietà
p
28
P
Proprietà
i tà
 action valore dell’attributo ACTION
 elements
l
t vettore
tt
contenente
t
t gli
li elementi
l
ti del
d l modulo
d l
 length numero di elementi del modulo
 method valore dell’attributo
dell attributo METHOD
 target valore dell’attributo TARGET
Oggetto
gg
Form: metodi
29
M
Metodi
t di
 reset() azzera il modulo reimpostando i valori di default per i
vari elementi
 submit() invia il modulo
Oggetto
gg
Form: esempi
p
30
 Supponendo che ll’ii-esimo
esimo elemento di un modulo
mod sia denominato nome_i è possibile farvi
riferimento in 3 modi diversi
document.mod.elements[i-1];
document.mod.elements[“nome_i”];
document.mod.name_i;
 Attenzione l’indice del primo elemento di un vettore
è sempre 0 ((quindi
i di l’i
l’i-esimo
i
elemento
l
h
ha iindice
di ii-1))
Elementi dei moduli
31
 All’interno
All’i t
di un modulo
d l possono comparire
i di
diversii
tipi di elementi, corrispondenti ai vari costrutti
HTML
 Ogni tipo ha proprietà e metodi specifici, per una
t tt i
trattazione
approfondita
f dit sii rimanda
i
d alla
ll guida
id di
riferimento del modello ad oggetti implementato dal
b
browser
s
Elementi dei moduli
32
Elementi dei moduli
33
 Tutti
T tti i ti
tipii di elementi
l
ti possiedono
i d
le
l seguenti
ti
proprietà


name nome dell’elemento
d ll’ l
t
value valore corrente dell’elemento
 Gli elementi
l
ti di ti
tipo IInputt possiedono
i d
lla proprietà
i tà
defualtValue che contiene il valore predefinito del
campo (attributo VALUE del tag HTML)
Elementi dei moduli
34
 Gli elementi
l
ti di ti
tipo R
Radio
di e Checkbox
Ch kb possiedono
i d
lla
proprietà checked che indica se l’elemento è stato
selezionato
 Gli elementi di tipo Select possiedono la proprietà
selectedIndex,
l t dI d
che
h contiene
ti
l’i
l’indice
di d
dell’elemento
ll’ l
t
selezionato nella lista, e la proprietà options, che
contiene
ti
il vettore
tt
delle
d ll sscelte
lt d
dell’elenco
ll’ l
Elementi dei moduli
35
 E’ possibile
ibil modificare
difi
i valori
l i contenuti
t
ti negli
li
elementi dei moduli
 Pertanto è possibile
ibil utilizzare
ili
questii elementi
l
i anche
h
per fornire risultati all’utente
 Se un elemento ha scopi esclusivamente di
rappresentazione può essere marcato come
READONLY
FOR … IN
36
 Serve a ricavare quali sono le proprietà di un oggetto.
oggetto
for (<propriet&agrave;> in <oggetto>) {
//istruzioni
}
dove proprietà è una "variabile-contenitore" che stiamo creando al
volo.
 Esempio con FORM:
<form name="mioForm">
<input type="button" NAME="miotesto" value="mio campo di
prova">
</form>
<script type="text/javascript">
for (prop in document.mioForm) {
document.write(prop+"<br/>");}
</script>
FOR … IN con arrayy
37
 Il for...
for in può essere utilizzato anche per scorrere gli
elementi di un array, se interrogato con la giusta sintassi:
<script type
type="text/javascript">
text/javascript >
alunni = new
Array("Aldo","Giovanni","Giacomo","Mario",“
Gi
Gianni","Monica");
i" "M i ")
for (prop in alunni) {
document.write(alunni[prop]+ <br/> );}
document.write(alunni[prop]+"<br/>");}
</script>
Altri oggetti:
gg
Oggetto
gg
Navigator
g
38
 L’oggetto
L’
tt navigator
i t rappresenta
t l’i
l’istanza
t
d
dell b
browser
in cui lo script è in esecuzione
 Proprietà
i à



appCodeName codice identificativo del browser
appName nome del
d lb
browser
appVersion numero di versione
Altri oggetti:
gg
Oggetto
gg
historyy
39
 Rappresenta
R
t lla sequenza di pagine
i visitate
i it t
dall’utente
 Tale
l sequenza è rappresentata mediante
di
un vettore
 Metodi


back() torna alla pagina precedente
forward() passa alla pagina successiva
Altri oggetti:
gg
Oggetto
gg
Screen
40
 Contiene informazioni sul display del client.
client
 availHeight Altezza dello schermo esclusa la taskbar
 availWidth Larghezza dello schermo esclusa la taskbar
 colorDepth La risoluzione di colore
 height L
L’altezza
altezza dello schermo
 pixelDepth La risoluzione in bit per pixel
 width La larghezza dello schermo