Modificare gli elementi del DOM

Una volta individuato l'elemento o gli elementi presenti su una pagina, possiamo modificarne il contenuto o altre caratteristiche sfruttando proprietà e metodi specifiche dei nodi di tipo elemento. Ad esempio, la proprietà innerHTML rappresenta il contenuto HTML di un elemento ed è accessibile sia in lettura che in scrittura. Il seguente codice modifica il contenuto di un paragrafo:

var p = document.getElementById("mioParagrafo");
p.innerHTML = "Testo del paragrafo";

Altri metodi dei nodi di tipo elemento ci consentono di analizzare e modificare i suoi attributi, come quelli riepilogati nella seguente tabella:

Metodo	Descrizione
hasAttribute(attrName)	restituisce true se l'elemento ha l'attributo specificato come parametro
hasAttributes()	restituisce true se l'elemento ha almeno un attributo valorizzato
getAttribute(attrName)	restituisce il valore dell'attributo specificato come parametro
setAttribute(attrName, value)	imposta un valore per un attributo

Il seguente esempio mostra come assegnare un'immagine di default agli elementi <img> di una pagina privi di un'immagine associata:

var imgList = document.getElementsByTagName("img");
for(var i=0; i < imgList.length; i++){
	if (!imgList[i].hasAttribute("src"))
		imgList[i].setAttribute("src", "default.png");
}

Alcuni attributi sono direttamente accessibili via JavaScript come proprietà dell'elemento. È ad esempio il caso degli attributi id, name, src e href. Alla luce di questa possibilità, possiamo riscrivere il codice precedente nel seguente modo:

var imgList = document.getElementsByTagName("img");
for(var i=0; i < imgList.length; i++){
	if (!imgList[i].src)
		imgList[i].src = "default.png";
}

Attributi e proprietà

Dal momento che un elemento del DOM è sostanzialmente un oggetto JavaScript, possiamo interagire con esso come un qualsiasi altro oggetto. Ad esempio possiamo aggiungere dinamicamente nuove proprietà semplicemente assegnandole un valore:

var img = document.getElementById("miaImmagine");
img.miaProprieta = "nuovo valore";

L'aggiunta di una nuova proprietà all'elemento del DOM non ha alcuna ripercussione sull'HTML, ma può risultare utile per fare delle personalizzazioni tramite JavaScript. Ad esempio potremmo assegnare ad una immagine informazioni testuali o numeriche per essere poi recuperate in un secondo momento.

Una distinzione va però fatta tra le proprietà e gli attributi di un elemento.

Innanzitutto, una proprietà aggiunta ad un elemento del DOM non è gestibile tramite getAttribute() e setAttribute(), dal momento che non diventa un attributo HTML.

Inoltre, mentre gli attributi non sono case-sensitive, cioè le seguenti istruzioni sono equivalenti:

img.getAttribute("src");
img.getAttribute("SRC");

le proprietà di un oggetto JavaScript lo sono.

Infine, mentre i valori assegnabili agli attributi sono soltanto stringhe, alle proprietà possiamo assegnare qualsiasi tipo di dato.

Esiste un altro aspetto molto importante nella distinzione tra attributi e proprietà da tenere in considerazione quando si manipola il DOM tramite JavaScript.

Abbiamo detto che per alcuni attributi è prevista una corrispondente proprietà dell'elemento del DOM. La proprietà riflette generalmente il valore dell'attributo, ma va tenuto presente che non sono esattamente la stessa cosa.

Prendiamo ad esempio le proprietà src di un elemento <img> e href di un elemento <a>. Mentre il valore dell'attributo restituito da getAttribute() restituisce sempre il valore presente nell'HTML, il valore restituito dalle proprietà src e href è l'URL completo alla risorsa, salvo errata interpretazione delle specifiche W3C da parte di qualche browser. Quindi, se abbiamo il seguente codice HTML:

<img id="miaImmagine" src="default.png" />

le seguenti istruzioni restituiscono valori diversi:

var img = document.getElementById("miaImmagine");
console.log(img.src);                   //"https://www.html.it/default.png"
console.log(img.getAttribute("src"));   //"default.png"

Un altro caso tipico è la proprietà checked di un elemento <input>. Mentre la proprietà ha un valore booleano che indica se l'elemento è smarcato o meno, l'attributo corrispondente restituisce la stringa "checked" o una stringa vuota.

Un aspetto più insidioso è legato all'interazione con l'utente. Consideriamo un elemento <input> con un suo valore predefinito:

<input id="txtNome" type="text" value="Mario" />

Inizialmente i valori dell'attributo value e della corrispondente proprietà coincidono. Ma se l'utente cambia il valore della casella di testo avremo valori differenti tra proprietà e attributo. In particolare avremo che il valore della proprietà value sarà sincronizzata con il nuovo valore inserito dall'utente, mentre l'attributo continuerà ad avere il valore iniziale.

In linea di massima, quando è possibile, è sempre preferibile accedere alle proprietà dell'elemento invece che all'attributo corrispondente. I casi in cui è necessario accedere agli attributi sono:

• quando non è prevista una corrispondente proprietà (ad esempio, in presenza di attributi custom);
• quando vogliamo accedere ai valori originali di quegli elementi che prevedono un'interazione con l'utente.