GeezerVison

The World Wide Web, restored to 800 pixels of glory.

GeezerVison is showing javascript.info — Count descendants

back to the lesson

Count descendants

importance: 5

There’s a tree structured as nested ul/li.

Write the code that for each <li> shows:

What’s the text inside it (without the subtree)
The number of nested <li> – all descendants, including the deeply nested ones.

Demo in new window

Open a sandbox for the task.

Let’s make a loop over <li>:

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

In the loop we need to get the text inside every li.

We can read the text from the first child node of li, that is the text node:

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

  // title is the text in <li> before any other nodes
}

Then we can get the number of descendants as li.getElementsByTagName('li').length.

Open the solution in a sandbox.

You are visitor 01402503 — GeezerVison does not store the pages you look up.
Best viewed with Netscape Navigator 4.7 or Internet Explorer 6 at 800×600. No cookies required.