15 dicembre 2021

Percorrere il DOM

Il DOM ci consente di fare qualsiasi cosa con gli elementi ed il loro contenuto, ma prima dobbiamo essere in grado di raggiungere lâ€™oggetto DOM corrispondente.

Tutte le operazioni sul DOM iniziano con lâ€™oggetto document. Questo Ã¨ il principale â€œpunto di ingressoâ€ per il DOM, dal quale possiamo accedere a qualsiasi nodo.

Ecco unâ€™immagine dei collegamenti che consentono di muoversi tra i nodi del DOM:

Esaminiamoli nel dettaglio.

In cima: documentElement e body

I nodi in cima allâ€™albero sono disponibili direttamente come proprietÃ di document:

<html> = document.documentElement: Il nodo del DOM piÃ¹ in alto Ã¨ document.documentElement, esso corrisponde al tag <html>.
<body> = document.body: Un altro nodo DOM largamente utilizzato Ã¨ lâ€™elemento <body>, ossia document.body.
<head> = document.head: Il tag <head> Ã¨ disponibile come document.head.

Uno script non puÃ² accedere ad un elemento che non esiste al momento dellâ€™esecuzione.

In particolare, se uno script si trova allâ€™interno di <head>, document.body non Ã¨ disponibile, perchÃ© il browser non lo ha ancora letto.

Quindi, nellâ€™esempio sottostante, il primo alert mostra null:

<html>

<head>
  <script>
    alert( "Da HEAD: " + document.body ); // null, <body> non esiste ancora
  </script>
</head>

<body>

  <script>
    alert( "Da BODY: " + document.body ); // HTMLBodyElement, ora <body> esiste
  </script>

</body>
</html>

Nel DOM, il valore null significa â€œnon esisteâ€ o â€œnessun nodo trovatoâ€.

Nodi figli: childNodes, firstChild, lastChild

Ci sono due termini che useremo dâ€™ora in poi:

Nodi figli (children o child node) : elementi che sono figli diretti, ossia che sono annidati al primo livello del nodo specificato. Ad esempio, <head> e <body> sono figli dellâ€™elemento <html>.
Discendenti : Tutti gli elementi che sono annidati a qualsiasi livello nellâ€™elemento specificato. Sono inclusi i figli, i figli dei figli, e cosÃ¬ via.

Ad esempio, qui <body> ha come figli <div> e <ul> (ed alcuni nodi di testo vuoti):

<html>
<body>
  <div>Inizio</div>

  <ul>
    <li>
      <b>Informazione</b>
    </li>
  </ul>
</body>
</html>

â€¦E come discendenti di <body>, oltre a <div> e <ul>, abbiamo anche gli elementi annidati piÃ¹ in profonditÃ , come <li> (figlio di <ul>) e <b> (figlio di <li>). In pratica lâ€™intero albero sotto a <body>.

La collection childNodes raccoglie tutti i nodi figlio, inclusi quelli di testo

Lâ€™esempio qui sotto mostra i figli di document.body:

<html>
<body>
  <div>Inizio</div>

  <ul>
    <li>Informazione</li>
  </ul>

  <div>Fine</div>

  <script>
    for (let i = 0; i < document.body.childNodes.length; i++) {
      alert( document.body.childNodes[i] ); // Text, DIV, Text, UL, ..., SCRIPT
    }
  </script>
  ...altro...
</body>
</html>

Da notare un particolare interessante. Se eseguiamo lâ€™esempio, lâ€™ultimo elemento mostrato Ã¨ <script>. Di fatto lâ€™ultimo elemento sarebbe â€œâ€¦altroâ€¦â€, ma al momento dellâ€™esecuzione dello script esso non Ã¨ ancora stato letto, quindi non viene visto.

Le proprietÃ firstChild e lastChild permettono un accesso piÃ¹ veloce al primo ed allâ€™ultimo figlio.

Sono delle semplici scorciatoie. Se sono presenti dei nodi figlio, allora le seguenti espressioni sono sempre vere :

          elem.childNodes[0] === elem.firstChild
elem.childNodes[elem.childNodes.length - 1] === elem.lastChild
        

Esiste anche la funzione speciale elem.hasChildNodes(), per verificare se sono presenti nodi figlio.

DOM collections

Come possiamo vedere, childNodes sembra un array. Ma in realtÃ non Ã¨ un array, ma piuttosto una collection: uno speciale oggetto iterabile, simile ad un array.

Questo comporta due importanti conseguenze:

Possiamo usare for..of per iterare:

          for (let node of document.body.childNodes) {
  alert(node); // mostra tutti i nodi della collection
}
        

Questo perchÃ© Ã¨ iterabile (ha la proprietÃ Symbol.iterator che contraddistingue gli iterabili).

I metodi degli array non funzionano, perchÃ© non Ã¨ un array:

alert(document.body.childNodes.filter); // undefined (il metodo filter non c'Ã¨!)

Il primo punto Ã¨ ottimo, il secondo Ã¨ tollerabile. Infatti nel caso avessimo bisogno dei metodi degli array possiamo usare Array.from e creare un â€œveroâ€ array a partire dalla collection:

alert( Array.from(document.body.childNodes).filter ); // function

Le DOM collections, ed in generale tutte le proprietÃ utili alla navigazione elencate in questo capitolo, funzionano in sola lettura.

Non possiamo sostituire un nodo figlio con qualcosâ€™altro con lâ€™assegnazione childNodes[i] = ....

Modificare il DOM richiede lâ€™utilizzo di altri metodi, che vedremo nel prossimo capitolo.

Salvo poche eccezioni, tutte le DOM collections sono vive. In altre parole, riflettono lo stato corrente del DOM.

Se prendiamo come riferimento elem.childNodes, ed aggiungiamo o rimuoviamo nodi dal DOM, essi appariranno o scompariranno automaticamente dalla collection.

Le collections sono iterabili usando for..of, ma a volte qualcuno prova ad usare for..in.

Eâ€™ una pratica sconsigliata. I cicli for..in iterano su tutte le proprietÃ enumerabili, e le collections possiedono alcune proprietÃ â€œextraâ€, che vengono usate raramente, e che in genere non vorremmo ci fossero restituite dal ciclo:

<body>
<script>
  // mostra 0, 1, length, item, values ed altro.
  for (let prop in document.body.childNodes) alert(prop);
</script>
</body>

I fratelli (siblings) ed il genitore (parent)

I fratelli sono nodi figli dello stesso genitore.

Ad esempio, qui <head> e <body> sono fratelli:

          <html>
  <head>...</head><body>...</body>
</html>
        

<body> Ã¨ chiamato fratello â€œsuccessivoâ€ o â€œa destraâ€ di <head>,
<head> Ã¨ chiamato fratello â€œprecedenteâ€ o â€œa sinistraâ€ di <body>.

Il fratello successivo Ã¨ nella proprietÃ nextSibling, quello precedente in previousSibling.

Il genitore Ã¨ disponibile come parentNode.

Ad esempio

// il genitore di <body> Ã¨ <html>
alert( document.body.parentNode === document.documentElement ); // true

// dopo di <head> c'Ã¨ <body>
alert( document.head.nextSibling ); // HTMLBodyElement

// prima di <body> c'Ã¨ <head>
alert( document.body.previousSibling ); // HTMLHeadElement

Navigazione solo tra elementi

Le proprietÃ di navigazione viste finora fanno riferimento a tutti i nodi. Ad esempio, in childNodes possiamo trovare: nodi elemento, nodi di testo, ed anche nodi commento se ce ne sono.

Ma per alcuni compiti non vogliamo nodi di testo o di commento. Vogliamo solo manipolare nodi che rappresentano i tags e che costituiscono la struttura della pagina.

Quindi vediamo altri collegamenti di navigazione che prendono in considerazione solo nodi elemento:

I collegamenti sono simili a quelli visti prima, ma con lâ€™aggiunta della parola Element:

children â€“ solo i figli che sono nodi elemento.
firstElementChild, lastElementChild â€“ il primo e lâ€™ultimo elemento figlio.
previousElementSibling, nextElementSibling â€“ gli elementi vicini.
parentElement â€“ lâ€™elemento genitore.

La proprietÃ parentElement restituisce lâ€™elemento genitore, mentre parentNode restituisce â€œqualsiasi nodoâ€ genitore. Queste proprietÃ in genere coincidono: entrambe restituiscono lo stesso genitore.

Con lâ€™unica eccezione di document.documentElement:

alert( document.documentElement.parentNode ); // document
alert( document.documentElement.parentElement ); // null

La ragione Ã¨ che il nodo radice document.documentElement (<html>) ha document come genitore, ma document non Ã¨ un nodo elemento, quindi parentNode lo restituisce, mentre parentElement no.

Questo dettaglio puÃ² essere utile quando vogliamo risalire da un elemento arbitrario elem verso <html>, ma senza arrivare a document:

          while(elem = elem.parentElement) { // su, fino a <html>
  alert( elem );
}
        

Modifichiamo uno degli esempi sopra, sostituendo childNodes conchildren. Ora vengono mostrati solo gli elementi:

<html>
<body>
  <div>Inizio</div>

  <ul>
    <li>Informazione</li>
  </ul>

  <div>Fine</div>

  <script>
    for (let elem of document.body.children) {
      alert(elem); // DIV, UL, DIV, SCRIPT
    }
  </script>
  ...
</body>
</html>

Ulteriori collegamenti: tabelle

Finora abbiamo descritto le proprietÃ base per la navigazione.

Alcuni tipi di elemento DOM possono fornire proprietÃ aggiuntive, specifiche per il loro tipo.

Le tabelle ne sono un esempio, e rappresentano un caso particolarmente importante:

Lâ€™elemento <table> supporta (in aggiunta a quelle trattate sinora) le seguenti proprietÃ :

table.rows â€“ la collection degli elementi <tr> della tabella.
table.caption/tHead/tFoot â€“ riferimenti agli elementi <caption>, <thead>, <tfoot>.
table.tBodies â€“ la collection degli elementi <tbody> (secondo lo standard possono essere molti, ma ce ne sarÃ sempre almeno uno. Anche se non Ã¨ nellâ€™HTML di origine, il browser lo inserirÃ automaticamente nel DOM).

Gli elementi <thead>, <tfoot>, <tbody> hanno la proprietÃ rows:

tbody.rows â€“ la collection degli elementi <tr> contenuti.

<tr>:

tr.cells â€“ la collection delle celle <td> e <th> contenute nel <tr> specificato.
tr.sectionRowIndex â€“ la posizione (index) di un dato <tr> incluso in <thead>/<tbody>/<tfoot>.
tr.rowIndex â€“ il numero di <tr> nella tabella nel suo insieme (include tutte le righe della tabella).

<td> e <th>:

td.cellIndex â€“ il numero della celle allâ€™interno del contenitore <tr>.

Un esempio di utilizzo:

<table id="table">
  <tr>
    <td>uno</td><td>due</td>
  </tr>
  <tr>
    <td>tre</td><td>quattro</td>
  </tr>
</table>

<script>
  // estrai td con "two" (prima riga, seconda colonna)
  let td = table.rows[0].cells[1];
  td.style.backgroundColor = "red"; // evidenzialo
</script>

La specifica: tabular data.

ProprietÃ di navigazione aggiuntive, sono anche disponibili per i moduli HTML. Le esamineremo piÃ¹ avanti, quando inizieremo a lavorare con i moduli.

Riepilogo

Dato un nodo DOM, possiamo spostarci tra i suoi vicini usando le proprietÃ di navigazione.

Ne esistono due tipi principali:

Per tutti i nodi: parentNode, childNodes, firstChild, lastChild, previousSibling, nextSibling.
Solo per i nodi elemento: parentElement, children, firstElementChild, lastElementChild, previousElementSibling, nextElementSibling.

Alcuni tipi di elemento DOM, es. le tabelle, Some types of DOM elements, e.g. tables, forniscono proprietÃ e collections aggiuntive per accedere al loro contenuto.

Esercizi

Figli nel DOM

Guardiamo questa pagina:

          <html>
<body>
  <div>Utenti:</div>
  <ul>
    <li>John</li>
    <li>Pete</li>
  </ul>
</body>
</html>
        

Per ciascuno dei seguenti, fornire almeno un modo per accedervi:

Il nodo DOM <div> ?
Il nodo DOM <ul> ?
Il secondo <li> (con Pete)?

Eâ€™ possibile farlo in diversi modi, ad esempio:

Il nodo DOM <div>:

          document.body.firstElementChild
// oppure
document.body.children[0]
// oppure (il primo nodo Ã¨ uno spazio, quindi prendiamo il secondo)
document.body.childNodes[1]
        

Il nodo DOM <ul>:

          document.body.lastElementChild
// oppure
document.body.children[1]
        

Il secondo <li> (con Pete):

          // prendi <ul>, e quindi il suo ultimo elemento figlio
document.body.lastElementChild.lastElementChild
        

La questione dei fratelli

Se elem Ã¨ un nodo arbitrario del DOMâ€¦

Eâ€™ vero che elem.lastChild.nextSibling Ã¨ sempre null?
Eâ€™ vero che elem.children[0].previousSibling Ã¨ sempre null?

Si, Ã¨ vero. Lâ€™elemento elem.lastChild Ã¨ sempre lâ€™ultimo, non ha nextSibling.
No, Ã¨ falso, perchÃ© elem.children[0] Ã¨ il primo figlio tra i nodi di tipo elemento, ma potrebbero esserci nodi di tipo diverso. Ad esempio previousSibling potrebbe essere un nodo di testo.

Nota: in entrambi i casi, se non ci sono figli si verificherÃ un errore.

Se non ci sono figli, elem.lastChild Ã¨ null, quindi non possiamo accedere a elem.lastChild.nextSibling. E la collection elem.children sarÃ vuota (come un array vuoto []).

Seleziona tutte le celle sulla diagonale

Scrivi il codice per evidenziare in rosso tutte celle sulla diagonale della tabella.

Dovrai estrarre tutte i <td> in diagonale da <table> ed evidenziarli usando il codice:

          // td dovrebbe essere il riferimento alla cella della tabella
td.style.backgroundColor = 'red';
        

Il risultato dovrebbe essere:

Apri una sandbox per l'esercizio.

Useremo le proprietÃ rows e cells per accedere alle celle sulla diagonale della tabella.

Apri la soluzione in una sandbox.

Mappa del tutorial

Commenti

leggi questo prima di lasciare un commentoâ€¦