Viewing: it.javascript.info

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

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

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

soluzione

Effettuiamo un ciclo iterativo sugli elementi <li>:

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

Per ciascuna iterazione abbiamo bisogno di ricavare il testo allinterno 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.

Contate i discendenti