Prof. Pagani Corrado JAVASCRIPT DOCUMENT OBJECT MODEL

Dimensione: px

Iniziare la visualizzazioe della pagina:

Download "Prof. Pagani Corrado JAVASCRIPT DOCUMENT OBJECT MODEL"

Felice Pizzi
5 anni fa
Visualizzazioni

1 Prof. Pagani Corrado JAVASCRIPT DOCUMENT OBJECT MODEL

2 DOCUMENT OBJECT MODEL (DOM) DOM fornisce una rappresentazione del documento HTML in composizione gerarchica di oggetti (DOM TREE). Questo albero di oggetti è pensato per essere facilmente accessibile tramite JavaScript sia in lettura sia in scrittura. La radice dell albero è l oggetto document a cui sono collegati i diversi nodi corrispondenti agli elementi presenti nella pagina.

3 TIPI DI NODO Tipo di nodo documento elemento attributo testo Descrizione Solitamente esiste un solo nodo di questo tipo nella rappresentazione di una pagina HTML e costituisce la radice dell albero; tuttavia in presenza di pagine con frame ci sono più nodi di tipo documento un nodo di tipo elemento individua in genere ad un tag HTML (<body>, <div>, <p> ) un nodo di tipo attributo corrisponde ad un attributo di un tag HTML, come ad esempio l attributo src del tag <img> un nodo di tipo testo corrisponde al contenuto testuale di un nodo, compresi eventuali spazi e caratteri speciali

4 SELEZIONARE GLI ELEMENTI DEL DOM Il modo più semplice per accedere ad un elemento della pagina HTML è definire per tale elemento l attributo id (che deve essere univoco nella pagina) ed utilizzare il metodo getelementbyid() dell oggetto document PAG HTML <p id="mioparagrafo">cadel Evans</p> PAG JS var p = document.getelementbyid("mioparagrafo"); Se l elemento non esiste viene restituito il valore NULL (se ne esistono più di uno, restituisce il primo individuato) Attenzione che se l oggetto NON è ancora stato incontrato dal parser HTML al momento dell interpretazione del codice JS, il metodo getelementbyid restituirà NULL

5 SELEZIONARE GLI ELEMENTI DEL DOM Esistono altri metodi in grado di restituire gli elementi selezionati in base ad un criterio; i metodi seguenti restituiscono una lista di elementi (NodeList) in quanto il selettore potrebbe non essere univoco getelementsbyname() getelementsbytagname() getelementbyclassname() var listaparagrafi_1 = document.getelementbyname( myparagrafo"); var listaparagrafi_2 = document.getelementbytagname("p"); var listaparagrafi_3 = document.getelementbyclassname("miostile");

QUERY SELECTOR Tra le novità introdotte nelle specifiche del DOM c è la possibilità di selezionare gli elementi di una pagina utilizzando i selettori CSS.

6 QUERY SELECTOR Tra le novità introdotte nelle specifiche del DOM c è la possibilità di selezionare gli elementi di una pagina utilizzando i selettori CSS. Due sono i metodi che consentono questo approccio: queryselector() e queryselectorall(). L uno restituisce il primo elemento trovato, l altro l elenco di tutti gli elementi individuati dal selettore. // selzioni tutti i tag paragrafo di classe messaggio var divlist = document.queryselectorall( p.messaggio"); //Prendo il tag con id mioparagrafo var p = document.queryselector("#mioparagrafo");

7 MODIFICARE GLI ELEMENTI DEL DOM Per ciascun elemento che abbiamo selezionato possiamo sfruttarne proprietà e metodi per poterlo modificare a piacimento Metodo innerhtml id, name, src, href hasattribute(attrname) hasattributes() getattribute(attrname) Descrizione Proprietà che accede sia in lettura che in scrittura ala contenuto HTML dell elemento Proprietà corrispondenti agli attributi HTML accessibili direttamente da codice JS Metodo che restituisce true se l elemento ha l attributo specificato come parametro Metodo che restituisce true se l elemento ha almeno un attributo valorizzato Metodo che restituisce il valore dell attributo specificato come parametro setattribute(attrname, value) Metodo che imposta un valore per un attributo

8 DIFFERENZA TRA PROPRITÀ E ATTRIBUTI Il valore dell attributo (restituito da getattribute()) restituisce sempre il valore presente nell HTML, il valore restituito dalle proprietà è il valore già elaborato relativo all elemento a cui si riferisce Ad esempio href è l URL completo alla risorsa In linea di massima è preferibile accedere alle proprietà dell elemento ad eccezione dei seguenti casi: quando non è prevista una corrispondente proprietà; quando vogliamo accedere ai valori originali indicati nel codice HTML. var img = document.getelementbyid("miaimmagine"); console.log(img.src); // restituisce " console.log(img.getattribute("src")); // restituisce immagine.png

9 NAVIGARE I NODI DEL DOM la proprietà childnodes di un elemento contiene l elenco dei nodi figli dell elemento sotto forma di NodeList I metodi firstchild() e lastchild() che restituiscono rispettivamente il primo figlio e l ultimo figlio di un elemento Il metodo parentnode() restituisce il nodo genitore i metodi nextsibling() e previoussibling() restituiscono il nodo fratello successivo e precedente nella struttura del DOM. // Navigazione di tutti i nodi figli tramite ciclo for for (var i = 0; i < div.childnodes.length; i++) { console.log(div.childnodes[i].innerhtml); }

10 AGGIUNGERE E RIMUOVERE ELEMENTI Aggiunta di un elemento var maindiv = document.getelementbyid("maindiv"); var a = document.createelement( a"); a.innerhtml = clicca ; Creo un tag a var aattr = document.createattribute( href"); aattr.value = Creo un ttributo e ne imposto il valore a.setattributenode(aattr); maindiv.appendchild(a); Aggancio l attributo al tag e poi il tag al div padre Eliminazione di un elemento var maindiv = document.getelementbyid("maindiv"); var a = maindiv.childnodes[maindiv.childnodes.length-1]; maindiv.removechild(a); Elimino l elemento figlio

11 ESERCIZIO NEGOZIO DI VERNICI Utilizzando in modo adeguato i linguaggi HTML, CSS e JavaScript realizzare una pagina con il layout indicato a fianco che: Calcoli il quantitativo di barattoli di vernice da acquistare conoscendo, per ciascuna delle 2 varianti proposte, resa (in m 2 /l) e capacità del barattoli (in l). L'utente dovrà indicare larghezza, altezza della parete e il numero di passate (mani) che vuole dipingere

12 ES NEGOZIO DI VERNICI HTML

13 ES NEGOZIO DI VERNICI CSS

ES NEGOZIO DI VERNICI JAVASCRIPT 1^ versione: Le funzioni calcola1 e calcola2 accedono agli elementi input tramite la funzione getelementbyid.

14 ES NEGOZIO DI VERNICI JAVASCRIPT 1^ versione: Le funzioni calcola1 e calcola2 accedono agli elementi input tramite la funzione getelementbyid. Per tale motivo occorre una funzione specifica per ciascuna variante prodotto per accedere agli id specifici! E una verisone migliorabile 2^ versione: Uso una unica funzione calcola che prende come parametro il nome del form a cui deve fare riferimento (un form per ciascuna variante prodotto). Il gestore evento diventa onclick= calcola( Prodotto1) Accede agli elementi del form tramite l attributo name (che si ripete una volta per ciascun form).

Documenti analoghi

Politecnico di Milano Facoltà del Design Bovisa. Ing. Marco Funaro Dipartimento di Elettronica e Informazione.

Politecnico di Milano Facoltà del Design Bovisa. Ing. Marco Funaro Dipartimento di Elettronica e Informazione. Introduzione a JavaScript Facoltà del Design Bovisa Ing. Marco Funaro Dipartimento di Elettronica e Informazione funaro@elet.polimi.it Un po di storia Introdotto per la prima volta nel 1995 per Netscape