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 | modifica sorgente]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 | modifica sorgente]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 | modifica sorgente]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 | modifica sorgente]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 | modifica sorgente]