# JavaScript/Proprietà e metodi del DOM

JavaScript
Copertina Tutti i moduli · Sviluppo
* IntroduzioneJavaScript/Introduzione
* Il nostro primo programmaJavaScript/Il nostro primo programma
* Tipi di dati e variabiliJavaScript/Tipi di dati e variabili
* Operatori e castingJavaScript/Operatori e casting
* Le strutture di controllo
** SelezioneJavaScript/Selezione
** IterazioneJavaScript/Iterazione
* Funzioni definite dall'utenteJavaScript/Funzioni definite dall'utente
* Programmazione ad oggettiJavaScript/Oggetti
** Oggetto StringJavaScript/Oggetto String
** Oggetto MathJavaScript/Oggetto Math
** Oggetto DateJavaScript/Oggetto Date
** Oggetto ArrayJavaScript/Oggetto Array
* CookieJavaScript/Cookie
* TimerJavaScript/Timer
* L'oggetto windowJavaScript/BOM
** Gli eventi nel BOMJavaScript/Gli eventi nel BOM
** Oggetto documentJavaScript/Oggetto document
** Altri oggetti del BOMJavaScript/Altri oggetti del BOM
* Il Document Object ModelJavaScript/DOM
** Proprietà e metodiJavaScript/Proprietà e metodi del DOM
** Gli eventi nel DOMJavaScript/Gli eventi nel DOM
* Espressioni regolariJavaScript/Espressioni regolari
* AJAX
** Introduzione ad AJAXJavaScript/Introduzione ad AJAX
** Usare AJAXJavaScript/Usare AJAX
* Costruttori e prototipiJavaScript/Costruttori e prototipi
* AppendiceJavaScript/Appendice
* CreditiJavaScript/Crediti
Modifica il sommario
Dopo l'introduzione generale al DOM e alla sua struttura, passiamo ora ad analizzare i suoi oggetti per applicare quanto visto.

## Ottenere un elemento

Vediamo ora il primo passo da compiere quando si lavora con il DOM: ottenere il riferimento ad un elemento HTML e memorizzarlo in una variabile.
Per fare questo, nella maniera più semplice, il DOM utilizza l'attributo id che è possibile assegnare ad ogni elemento:
Per ottenere invece l'elemento root del file HTML, si usa la proprietà document.documentElement.

## Lavorare su un elemento

Una volta ottenuto l'elemento (questo è il modo più semplice, ma ne esistono anche altri), è possibile modificarne gli attributi o modificare gli stili:
* la proprietà tagName restituisce il nome del tag (per esempio a o img)
* la proprietà style permette di impostarne lo stile in modo veloce (questa caratteristica non è in realtà uno standard DOM, ma funziona bene su tutti i browser) tramite il nome della proprietà CSS, ad esempio p1.style.color = "#f00"; imposta a rosso il colore del paragrafo ottenuto prima
* esistono poi tre metodi per impostare o eliminare gli attributi:
** setAttribute imposta un attributo tramite il nome e il valore (p1.setAttribute("align", "center"););
** getAttribute restituisce il valore di un attributo tramite il suo nome (p1.getAttribute("align"););
** removeAttribute rimuove un attributo (tornando così al valore di default) tramite il suo nome (p1.removeAttribute("align");).

## Spostarsi nella struttura ad albero

Arriva ora il momento di sfruttare la struttura ad albero che abbiamo visto ora. L'node espone infatti delle proprietà e dei metodi che permettono di spostarsi nella struttura ad albero, per ottenere nodi fratelli, genitori o figli:
* firstChild e lastChild restituiscono il primo e l'ultimo nodo figlio di un elemento (se è uno solo, restituiscono lo stesso elemento).
* previousSibling e nextSibling restituiscono il precedente e il successivo nodo "fratello" del nodo
* parentNode restituisce il nodo genitore
* ownerDocument restituisce l'elemento del documento che contiene il nodo (ad esempio <body>)
* getElementsByTagName è un metodo che restituisce un elenco di tutti i nodi figli con il nome specificato (per esempio "img"); per accedere ad un elemento si usa la normale notazione degli array.
Una volta ottenuto un nodo, è possibile usare la proprietà nodeValue che ne restituisce il valore e la proprietà nodeType che ne restituisce il tipo come numero.
Analizziamo ad esempio questo spezzone di HTML:
Questa è la sua rappresentazione del DOM:
Vediamo ora come agire. La cosa più semplice è partire dall'elemento con un ID univoco:
Vediamo un altro esempio, con questo spezzone di codice
Usando il metodo getElementsByTagName possiamo ottenere un array di tutti i nodi degli elementi <p> all'interno del div:
Infatti, essendo myParagraphs un array, il primo elemento avrà indice 0 (myParagraphs[0]). Se l'array ha 3 elementi, l'ultimo elemento sarà quindi myParagraphs[2], ovvero la lunghezza dell'array (myParagraphs.length) diminuita di 1.

## Creare nuovi elementi

La possibilità di gestire qualsiasi elemento della pagina come oggetto dà anche la possibilità di creare nuovi elementi, semplicemente creando nuovi oggetti di nodo e poi inserendoli nella struttura ad albero. Per fare ciò esistono alcuni particolari metodi, prima di tutto dell'oggetto document:
* createElement: crea un nodo di elemento con il nome specificato come parametro
* createTextNode: crea un nodo di testo con il testo specificato
Una volta creato un nodo, sia esso di elemento o di testo, va aggiunto ai nodi già esistenti:
* appendChild aggiunge al nodo il nodo figlio passato come parametro, in ultima posizione
* insertBefore inserire il nodo specificato prima del nodo specificato come secondo argomento
La sintassi è: nodo_genitore.insertBefore(nuovo_elemento,vecchio_elemento);
* removeChild elimina il nodo figlio indicato come parametro
* replaceChild sostituisce il nodo figli indicato nel primo parametro con il secondo
* hasChildNodes restituisce true se il nodo ha nodi figli.
Vediamo un esempio:

## Note

* ↑ http://www.w3schools.com/htmldom/met_doc_getelementsbytagname.asp