JavaScript
DOM – Document Object Model
DOM - Document Object Model
API implementata dai browser


Indipendente dal linguaggio e dalla piattaforma
Forma di rappresentazione dei documenti strutturati
Definisce il modo di accedere alla struttura del documento
Permette di visualizzare un documento sotto forma di
albero




Gli elementi del documento sono i nodi dell’albero
Standard ufficiale del W3C http://www.w3.org/DOM/

2
Alice Pavarani
DOM di un documento HTML

Il browser interpretando un documento HTML ne genera
il DOM

Esempio:
DOCUMENT
HTML
HEAD
TITLE
Esempio DOM
3
BODY
META
H1
H2
P
A
Titolo
Sottotitolo
Testo del
paragrafo
Link
Alice Pavarani
DOM e JavaScript: gli oggetti ospite

Il DOM non è una parte di JavaScript

Il DOM è una collezione di oggetti per Javascript
navigator
window
frame
layer
link
text
textarea
area
document
form
anchor
password
fileUpload
location
applet
submit
hidden
plugin
history
plugin
image
reset
radio
button
checkbox
select
option
4
Alice Pavarani
mimeType
Proprietà e metodi comuni
Proprietà
id
Identificativo (dovrebbe essere univoco)
attributes
Restituisce un vettore di attributi che caratterizzano l’elemento
childNodes
Restituisce un vettore contenente gli elementi (nodi) figli dell’elemento
className
Identifica la classe di appartenenza dell’elemento (lettura/scrittura)
nodeName, nodeType, nodeValue
Nome, tipo e valore del nodo corrente
parentNode
Restituisce il nodo padre del nodo corrente
style
Restituisce lo stile che si applica all’elemento
Metodi
addEventListener
Aggiunge un gestore per un determinato evento all’elemento a cui si applica
removeEventListener
appendChild
Elimina un gestore di evento esistente
Aggiunge un elemento in coda alla lista degli elementi contenuti nel nodo corrente
cloneNode
Restituisce una copia dell’elemento a cui si applica
getAttribute
Restituisce il valore dell’attributo specificato come argomento
5
Alice Pavarani
Window
proprietà
http://www.w3schools.com/jsref/obj_window.asp
Il padre di tutti gli oggetti
Rappresenta la finestra corrente del browser


Proprietà
name
statusbar
locationbar
scrollbars
toolbar
Nome della finestra corrente
valori booleani che se
impostati a false la proprietà
visible nasconde la barra
relativa (di default è true)
screenLeft, screenTop
Internet Explorer, …
screenX, screenY
Chrome, Firefox, …
status
6
Barra di stato
Barra degli indirizzi
Barre di scorrimento (verticali/orizzontali)
Barra degli strumenti
Distanza, in pixel, dal bordo sinistro e da quello in alto
della finestra del browser rispetto al desktop
Messaggio da visualizzare sulla barra di stato
Alice Pavarani
Window
metodi
http://www.w3schools.com/jsref/obj_window.asp
Il padre di tutti gli oggetti
Rappresenta la finestra corrente del browser


Metodi
alert()
Visualizza un alert con un messaggio ed il bottone ok
blur()
Rimuove il focus dalla finestra corrente
close()
Chiude la finestra corrente
confirm()
Visualizza un box di dialogo con un messaggio ed i bottoni ok e annulla
focus()
Assegna il focus alla finestra corrente
open()
Apre una nuova finestra del browser
print()
Stampa il contenuto della finestra corrente
prompt()
Visualizza un box di dialogo con un messaggio e un campo di inserimento per l’utente
resizeTo()
Ridimensiona la finestra alle dimensioni specificate (larghezza e altezza)
stop()
Interrompe il caricamento della finestra
7
Alice Pavarani
Document
http://www.w3schools.com/jsref/dom_obj_document.asp
Rappresenta il documento HTML

Proprietà
inputEncoding Restituisce la codifica dei caratteri utilizzata nel documento (sola lettura)
lastModified
Restituisce la data e l’ora di ultima modifica del documento (sola lettura)
readyState
Restituisce lo stato del caricamento della pagina (sola lettura)
title
Titolo della pagina (tag <title>)
URL
Restituisce l’indirizzo completo della pagina (sola lettura)
Metodi
createElement()
Crea un nuovo elemento nel documento - esempio
createTextNode()
Crea un elemento di tipo testuale nel documento - esempio
getElementById()
Restituisce l’elemento il cui attributo ID ha il valore specificato
getElementByName()
Permette di accedere a tutti gli elementi aventi il nome specificato
getElementByTagName()
Restituisce la lista di nodi contenente tutti gli elementi di un certo tag
write(), writeln()
Permettono di scrivere espressioni HTML sul documento
8
Alice Pavarani
Location
http://www.w3schools.com/jsref/obj_location.asp
Contiene le informazioni riguardo l’indirizzo URL corrente

Proprietà
Metodi
host
pathname
assign()
href
port
reload()
origin
protocol
replace()
History
http://www.w3schools.com/jsref/obj_history.asp
Contiene gli indirizzi URL visitati all’interno della finestra
corrente
Metodi

Proprietà
lenght
back()
forward()
go()
9
Alice Pavarani
Navigator
http://www.w3schools.com/jsref/obj_navigator.asp


Rappresenta il browser che visualizza la pagina Web
Fornisce informazioni sul browser
<script>
// oggetto Navigator - Informazioni sul Browser
txt
txt
txt
txt
txt
txt
txt
txt
txt
= "<p>Browser CodeName: " + navigator.appCodeName + "</p>";
+= "<p>Browser Name: " + navigator.appName + "</p>";
+= "<p>Browser Version: " + navigator.appVersion + "</p>";
+= "<p>Cookies Enabled: " + navigator.cookieEnabled + "</p>";
+= "<p>Browser Language: " + navigator.language + "</p>";
+= "<p>Browser Online: " + navigator.onLine + "</p>";
+= "<p>Platform: " + navigator.platform + "</p>";
+= "<p>User-agent header: " + navigator.userAgent + "</p>";
+= "<p>User-agent language: " + navigator.systemLanguage + "</p>";
document.writeln(txt);
</script>
Esempio tratto da http://www.w3schools.com/js/js_window_navigator.asp
10
Alice Pavarani