вернуться к уроку

Считаем потомков

важность: 5

У нас есть дерево, структурированное как вложенные списки ul/li.

Напишите код, который выведет каждый элемент списка <li>:

  1. Какой в нём текст (без поддерева) ?
  2. Какое число потомков – всех вложенных <li> (включая глубоко вложенные) ?

Демо в новом окне

Открыть песочницу для задачи.

Пройдём циклом по всем элементам <li>:

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

В цикле нам нужно получить текст в каждом элементе li. Мы можем прочитать текстовое содержимое элемента списка из первого дочернего узла li, который будет текстовым узлом:

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

  // переменная title содержит текст элемента <li>
}

Так мы сможем получить количество потомков как li.getElementsByTagName('li').length.

Открыть решение в песочнице.