JavaScript/Proprietà e metodi del DOM
Dopo l'introduzione generale al DOM e alla sua struttura, passiamo ora ad analizzare i suoi oggetti per applicare quanto visto.
Ottenere un elemento modifica
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:
var par = document.getElementById("p1"); //ottiene il paragrafo con id="p1"
Per ottenere invece l'elemento root del file HTML, si usa la proprietà document.documentElement.
Lavorare su un elemento modifica
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");).
- setAttribute imposta un attributo tramite il nome e il valore (
Spostarsi nella struttura ad albero modifica
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[1].
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:
<h1>This is an header</h1>
<p id="p1">This is some text, <b>a bold element</b> and another text</p>
Questa è la sua rappresentazione del DOM:
Vediamo ora come agire. La cosa più semplice è partire dall'elemento con un ID univoco:
var p1 = document.getElementById("p1");
var h1 = document.previousSibling; //ottiene l'elemento H1
alert(p1.nodeValue); //restituisce "null" (un elemento HTML non ha un valore)
var testo1 = p1.firstChild;
alert(testo1.nodeValue); //restituisce il valore del nodo, ovvero "This is some text"
alert(testo1.nextSibling); //restituisce "Object BElement"
//in quanto il fratello del primo nodo di testo è l'elemento <b>
alert(testo1.nextSibling.firstChild); //restituisce il riferimento al nodo di testo contenuto nel tag <b>
Vediamo un altro esempio, con questo spezzone di codice
<div id="myDiv">
<p>Paragraph 1</p>
<p>Paragraph 2</p>
<h1>An HTML header</h1>
<p>Paragraph 3</p>
</div>
Usando il metodo getElementsByTagName possiamo ottenere un array di tutti i nodi degli elementi <p> all'interno del div:
var myDiv = document.getElementById("myDiv"); // ottiene il nodo div
var myParagraphs = myDiv.getElementsByTagName('P'); //restituisce un array di tutti i paragrafi
// ad esempio possiamo ottenere l'ultimo paragrafo del div semplicemente scrivendo:
var mySecondPar = myParagraphs[myParagraphs.length - 1]
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 modifica
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:
var body = document.body;
var link = document.createElement("a");
var testo = document.createTextNode("Segui questo link");
link.setAttribute("href", "pagina.html");
link.appendChild(testo);
body.appendChild(link);
Note modifica