DOM – Document Object Model

Presentazione sul tema: "DOM – Document Object Model"— Transcript della presentazione:

1 DOM – Document Object Model
JavaScript DOM – Document Object Model

2 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 Alice Pavarani

3 DOM di un documento HTML
Il browser interpretando un documento HTML ne genera il DOM Esempio: DOCUMENT HTML BODY HEAD TITLE META Esempio DOM H1 H2 Titolo Sottotitolo P Testo del paragrafo A Link Alice Pavarani

4 DOM e JavaScript: gli oggetti ospite
Il DOM non è una parte di JavaScript Il DOM è una collezione di oggetti per Javascript window frame document location history layer link area form anchor applet plugin image textarea text fileUpload password hidden submit reset checkbox radio button select option navigator plugin mimeType Alice Pavarani

5 Proprietà e metodi comuni
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 Elimina un gestore di evento esistente appendChild 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 Alice Pavarani

6 Window proprietà http://www.w3schools.com/jsref/obj_window.asp
Il padre di tutti gli oggetti Rappresenta la finestra corrente del browser Proprietà name Nome della finestra corrente statusbar valori booleani che se impostati a false la proprietà visible nasconde la barra relativa (di default è true) Barra di stato locationbar Barra degli indirizzi scrollbars Barre di scorrimento (verticali/orizzontali) toolbar Barra degli strumenti screenLeft, screenTop Internet Explorer, … Distanza, in pixel, dal bordo sinistro e da quello in alto della finestra del browser rispetto al desktop screenX, screenY Chrome, Firefox, … status Messaggio da visualizzare sulla barra di stato Alice Pavarani

7 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 Alice Pavarani

8 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 Alice Pavarani

9 Location http://www.w3schools.com/jsref/obj_location.asp
Contiene le informazioni riguardo l’indirizzo URL corrente Proprietà host pathname href port origin protocol Metodi assign() reload() replace() History Contiene gli indirizzi URL visitati all’interno della finestra corrente Metodi back() forward() go() Proprietà lenght Alice Pavarani

10 Navigator http://www.w3schools.com/jsref/obj_navigator.asp
Rappresenta il browser che visualizza la pagina Web Fornisce informazioni sul browser Esempio tratto da <script> // oggetto Navigator - Informazioni sul Browser txt = "<p>Browser CodeName: " + navigator.appCodeName + "</p>"; txt += "<p>Browser Name: " + navigator.appName + "</p>"; txt += "<p>Browser Version: " + navigator.appVersion + "</p>"; txt += "<p>Cookies Enabled: " + navigator.cookieEnabled + "</p>"; txt += "<p>Browser Language: " + navigator.language + "</p>"; txt += "<p>Browser Online: " + navigator.onLine + "</p>"; txt += "<p>Platform: " + navigator.platform + "</p>"; txt += "<p>User-agent header: " + navigator.userAgent + "</p>"; txt += "<p>User-agent language: " + navigator.systemLanguage + "</p>"; document.writeln(txt); </script> Alice Pavarani