Vai al contenuto

JavaScript/Proprietà e metodi del DOM

Wikibooks, manuali e libri di testo liberi.
Indice del libro

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");).

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);