DOM: che cos’è, come funziona e come modificarlo in JavaScript

Questo articolo può essere soggetto ad aggiornamenti

Se hai domande oppure osservazioni, lascia pure un commento.

Document

Il nodo document è il punto di partenza: è da questo nodo che si raggiungono tutti gli elementi del DOM. Rappresenta anche l’oggetto Document, che mette a disposizione diversi metodi per accedere agli elementi. ( es. : document.querySelector(‘div.exemple’); )

Elemento

Gli elementi HTML descrivono la struttura di una pagina HTML. Per entrare nell’albero del DOM parti dalla ricerca degli elementi tramite Document. Una volta trovato l’elemento che ti interessa, puoi accedere ai suoi nodi di testo e di attributo.

Attributo

I tag di apertura degli elementi HTML possono contenere degli attributi ( per esempio : id, class, … ) e questi sono rappresentati nell’albero del DOM da nodi di attributo. I nodi di attributo non sono figli dell’elemento che li porta: fanno parte di quell’elemento e a loro volta non possono avere figli. Una volta raggiunto un elemento, esistono metodi e proprietà JavaScript specifici per leggere o modificare i suoi attributi.

Testo

Come per il nodo di attributo, si arriva a un nodo di testo passando da un nodo elemento, e come per il nodo di attributo, i nodi di testo non possono avere figli.

Accedere agli elementi

---

Per poter modificare un elemento dobbiamo prima riuscire a raggiungerlo: per questo esistono parecchi metodi che permettono di navigare nel DOM e di modificarlo.

Selezionare un elemento

• getElementById() : dà accesso a un elemento tramite il suo attributo ID.
• querySelector() : restituisce un elemento in base a un selettore CSS.

Selezionare più elementi

Questi metodi restituiscono gli elementi sotto forma di array

• getElementsByClassName() : restituisce più elementi tramite una classe.
• getElementsByTagName() : restituisce più elementi tramite un tag HTML ( es. : <div> ) .
• querySelectorAll() : restituisce più elementi in base a un selettore CSS.

Passare da un nodo all’altro

• parentNode : restituisce l’elemento padre dell’elemento corrente.
• childNodes : restituisce l’elenco dei figli dell’elemento corrente.
• previousSibling : restituisce il nodo fratello precedente dell’elemento corrente.
• nextSibling : restituisce il nodo fratello successivo dell’elemento corrente.
• firstChild : restituisce il primo elemento figlio dell’elemento corrente.
• lastChild : restituisce l’ultimo elemento figlio dell’elemento corrente.

Manipolare gli attributi

---

Una volta raggiunto il tuo elemento hai accesso ai suoi attributi e ai loro valori, con diversi metodi per manipolarli.

id

• id : legge o imposta l’id dell’elemento

Classe

• className : legge o imposta la classe dell’elemento.
• classList : restituisce un array con l’elenco delle classi dell’elemento
• add : aggiungere una classe alla lista
• remove : togliere una classe dalla lista
• toggle : aggiungere/togliere una classe (alterna: la aggiunge se non c’è, la toglie se c’è).
• contains : restituisce un booleano vero se una classe è nella lista.

Attributi in generale

• hasAttribute() : restituisce un booleano vero se un attributo esiste nell’elemento corrente.
• getAttribute() : restituisce il valore di un attributo.
• setAttribute() : aggiunge all’elemento un attributo e, come secondo argomento, il suo valore.
• removeAttribute() : toglie un attributo dall’elemento.

Accedere ai valori.

• nodeValue : restituisce il contenuto di un nodo, nel caso di un paragrafo restituisce il suo testo, mentre se il nodo è un attributo restituisce il valore dell’attributo.
• innerText : recupera il testo senza tenere conto del markup..
• innerHTML : recupera il testo insieme al markup del nodo.
• textContent : restituisce il testo come innerText, ma comprende anche <script> e <style>, al contrario di innerText.

Aggiungere elementi in 3 passaggi

---

Una delle cose più importanti quando si manipola il DOM è poter creare nuovi elementi: un elemento completo si crea in 3 passaggi:

1. createElement() : si comincia creando un nuovo nodo elemento con il metodo createElement(). Questo nodo elemento viene messo in una variabile.
   javascriptCopia

   var element= document.createElement("p");

2. createTextNode() : createTextNode() crea un nuovo nodo di testo. Anche qui il nodo viene messo in una variabile, e può essere agganciato al nodo elemento con il metodo appendChild().
   javascriptCopia

   var texte = document.createTextNode("Lorem Ipsum");

3. appendChild() : ora che hai il tuo elemento, con o senza contenuto in un nodo di testo, puoi aggiungerlo all’albero del DOM con questo metodo.
   javascriptCopia

   var element = document.createElement('p');
   var texte = document.createTextNode('Lorem Ipsum');
   element.appendChild(texte);
   document.body.appendChild(element);

Il metodo write

Forse hai sentito parlare del metodo document.write per scrivere markup e testo in un documento, questo metodo però porta parecchi inconvenienti e problemi, perché funziona solo mentre la pagina viene caricata la prima volta e, una volta terminato il caricamento, può causare guai di vario genere.

• Sovrascrivere tutta la pagina
• Non aggiungere il contenuto alla pagina
• Creare una nuova pagina

Togliere un elemento in 3 passaggi

---

Come per aggiungere un elemento nel DOM, capita di dover eliminare un elemento dal DOM.

1. Per farlo devi mettere in una variabile l’elemento che vuoi eliminare.
   javascriptCopia

   var removeElement= document.getElementById('monId');

2. Poi, a partire da questa variabile, si accede all’elemento padre con la proprietà parentNode .
   javascriptCopia

   var parentElement = removeElement.parentNode;

3. Con questa seconda variabile potrai eliminare l’elemento che avevi messo da parte nel primo passaggio.
   javascriptCopia

   var removeElement= document.getElementById('monId');
   var parentElement = removeElement.parentNode;
   parentElement .removeChild(removeElement);