torna alle lezioni

Contate i discendenti

Abbiamo un alberatura HTML strutturata come un elenco di ul/li annidati.

Scrivete il codice che per ogni elemento <li> mostri:

  1. Qual è il testo al suo interno (senza considerare il testo di eventuali sottoelementi).
  2. Il numero degli elementi <li> annidati – tutti i discendenti, considerando tutti i livelli di annidamento.

Demo in una nuova finesta

Apri una sandbox per l'esercizio.

Effettuiamo un ciclo iterativo sugli elementi <li>:

for (let li of document.querySelectorAll('li')) {
  ...
}

Per ciascuna iterazione abbiamo bisogno di ricavare il testo all’interno di ogni li.

Possiamo leggere il testo dal primo nodo figlio di li, che è un nodo di testo:

for (let li of document.querySelectorAll('li')) {
  let title = li.firstChild.data;

  // title è il testo nel <li> prima di qualsiasi altro nodo
}

A questo punto possiamo ricavare il numero dei discendenti con li.getElementsByTagName('li').length.

Apri la soluzione in una sandbox.