Document Object Model
L’oggetto document rappresenta il documento html visualizzato ed è su di esso che si agisce per rendere le pagine dinamiche.
Tutti gli oggetti nell’html sono proprietà dell’oggetto document.
Possiede le seguenti collections, le più diffuse:
forms[]
links[]
images[]
anchors[]
forms[]
links[]
images[]
anchors[]
Sintassi
Per invocare metodi e proprietà di document è necessario utilizzare :
document.metodo()
document.proprieta
document.metodo()
document.proprieta
Proprietà
document.bgColor (colore di background)
document.fgColor (colore del testo)
document.linkColor (colore link)
document.alinkColor
document.vlinkColor
document.title
document.referrer (URL di provenienza)
Metodi principali
document.write() permette di scrivere testo all’interno di un documento. Ha un parametro di tipo stringa. Attenzione! Se si associa a un evento, sovrascrive il documento corrente.
document.focus(): porta in primo piano la finestra del documento.
document.open(): apre un flusso per raccogliere l’uscita del metodo write(), si usa per creare un nuovo flusso di informazioni, il contenuto del nuovo docuemnto viene inserito con il metodo document.write().
document.close(): chiude un flusso di uscita e visualizza i dati. Se si dimentica di inserire il metodo close() il browser non interrompe mai l’animazione di caricamento.
Attributi e Proprietà
Ogni elemento HTML e caratterizzato da una serie di attributi.
<img src=…>
img è il tag ed src è un suo attributo.
<img src=…>
img è il tag ed src è un suo attributo.
In javascript gli elementi html corrispondono ad oggetti java e i loro attributi rappresentano le proprietà.
img à oggetto image
src à proprietà src
img à oggetto image
src à proprietà src
Per richiamare il valore delle proprietà di un oggetto si utilizza la notazione: oggetto.proprieta
Document.image.src
Riferimento agli oggetti
Per riferirsi ad un certo oggetto si fa riferimento alla sua posizione nel documento.
Partendo dal documento , si percorre la gerarchia degli oggetti che contiene.
Ogni volta che si incontra un elemento, si aggiunge all’espressione il nome dell’elemento seguita dal punto.
Esempio:
<body>
<form name=”mio_form”>
<input name=”campo1” type=”” value=””>
à document.mio_form.campo1
à document.mio_form.campo2
<body>
<form name=”mio_form”>
<input name=”campo1” type=”” value=””>
à document.mio_form.campo1
à document.mio_form.campo2
Percorsi qualificati
Per riferirsi alle proprietà e metodi dell’oggetto window non è necessario riferirsi all’oggetto window.
window.alert() = alert()
window.alert() = alert()
Per riferirsi alle proprietà e metodi dell’oggetto document è necessario riferirsi all’oggetto document.
document.mio_form.campo1
document.mio_form.campo1
Oggetti multipli
Il riferimento a un oggetto del DOM è determinato dalla posizione dell’elemento corrispondente nella gerarchia degli elementi HTML.
Problema: in un documento sono presenti più di un’immagine, più di un link, più di un pulsante, ecc.
SOLUZIONI:
1. Riferirmi a un insieme di oggetti dello stesso tipo come array. L’ordine di un elemento nel documento determina la sua posizione nell’array.
<body>
<img src=””> àdocument.images[0]
<img src=””> àdocument.images[1]
<img src=””> àdocument.images[2]
<body>
<img src=””> àdocument.images[0]
<img src=””> àdocument.images[1]
<img src=””> àdocument.images[2]
2. Riferirsi agli oggetti attraverso un nome. Nome è assegnato attraverso l’attributo name.
<body>
<img src=”” name=”img1”> àdocument.img1
<img src=”” name=”img2”> > àdocument. Img2
<img src=”” name=”img3”> > àdocument. Img3
<body>
<img src=”” name=”img1”> àdocument.img1
<img src=”” name=”img2”> > àdocument. Img2
<img src=”” name=”img3”> > àdocument. Img3
ALTRI METODI:
Usare gli identificatori per recuperare gli elementi con il metodo:
document.getElementBYyId()
restituisce un riferimento all’elemento con un certo identificatore.
<body>
<img src=”” id=”img1”>
document.getElementBYyId(“img1”)
document.getElementBYyId()
restituisce un riferimento all’elemento con un certo identificatore.
<body>
<img src=”” id=”img1”>
document.getElementBYyId(“img1”)
Si possono recuperare gli elementi caratterizzati dallo stesso tag con document.getElementsByTagName(nome_TAG)
Viene restituito un array di tutti gli elementi del tag considerato, nell'ordine in cui compaiono nel codice HTML.
document.getElementsByTagName("img").item(0)
Viene restituito un array di tutti gli elementi del tag considerato, nell'ordine in cui compaiono nel codice HTML.
document.getElementsByTagName("img").item(0)
Oggetto Image
Per ogni immagine all’interno di un file HTML il browser crea un’istanza di un oggetto image.
Proprietà:
document.images[0].src
document.images[0].name
document.images[0].width
document.images[0].height
document.images[0].src
document.images[0].name
document.images[0].width
document.images[0].height
Nessun commento:
Posta un commento