назад до уроку

Підрахувати нащадків

важливість: 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.

Відкрити рішення в пісочниці.