Почему firstChild выводит соседа?
Есть задача:
<body>
<ul>
<li>Животные
<ul>
<li>Млекопитающие
<ul>
<li>Коровы</li>
<li>Ослы</li>
<li>Собаки</li>
<li>Тигры</li>
</ul>
</li>
<li>Другие
<ul>
<li>Змеи</li>
<li>Птицы</li>
<li>Ящерицы</li>
</ul>
</li>
</ul>
</li>
<li>Рыбы
<ul>
<li>Аквариумные
<ul>
<li>Гуппи</li>
<li>Рыба-ангел</li>
</ul>
</li>
<li>Морские
<ul>
<li>Морская форель</li>
</ul>
</li>
</ul>
</li>
</ul>
<script>
for (let li of document.querySelectorAll('li')) {
// получаем название из текстового узла
let title = li.firstChild.data;
title = title.trim(); // удаляем лишние пробелы c конца строки
// считаем количество потомков
let count = li.getElementsByTagName('li').length;
console.log(title + ': ' + count);
}
</script>
</body>Почему выводятся эти данные:
Коровы
Ослы
Собаки
Тигры
Или более упрощенный вариант вопроса. Есть иерархия:
1
2
3
3
Мы можем вывести 2, так как он первый ребенок 1 и первую тройку, так как она ребенок 2. Но почему выведется и вторая тройка?
Ответы (1 шт):
Автор решения: Pilaton
→ Ссылка
У вас цикл по всем найденным элементам <li>.
for (let li of document.querySelectorAll('li')) {...