У меня есть код в html, и я хочу распечатать теги с помощью рекурсивной функции. Проблема в том, что childNodes возвращает один элемент, который не определен для каждого элемента li.
Код.
var div5 = document.getElementById('div5');
function printItem(item, paddingLevel) {
console.info(paddingLevel + item.tagName);
paddingLevel += " ...... ";
var childs = item.childNodes;
for (var i = 0; i < childs.length; i++) {
printItem(childs[i], paddingLevel);
}
}
printItem(div5, "");<div id = "div5">
<ul>
<li>Testing: 0</li>
<li>Testing: 1</li>
<li>Testing: 2</li>
.......
<li>Testing: 9</li>
</ul>
</div>Результат в консоли:
DIV
...... UL
...... ...... LI
...... ...... ...... undefined
Спасибо Вам и хорошего дня !!!



![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)


Вам необходимо протестировать элемент, который вы печатаете, так как это может быть Текстовый узел, а не Элемент. Вы можете проверить это через nodeType или просто проверить, есть ли на узле childNodes:
var div5 = document.getElementById('div5');
function printItem(item, paddingLevel) {
if (item.nodeType === 1) { // *** 1 = Element
console.info(paddingLevel + item.tagName);
paddingLevel += " ...... ";
var childs = item.childNodes;
for (var i = 0; i < childs.length; i++) {
printItem(childs[i], paddingLevel);
}
}
}
printItem(div5, "");<div id = "div5">
<ul>
<li>Testing: 0</li>
<li>Testing: 1</li>
<li>Testing: 2</li>
<li>Testing: 3</li>
</ul>
</div>Это потому, что childNodes не фильтрует текстовые узлы, у которых нет свойства tagName.
используйте условие, чтобы пропустить эти узлы следующим образом:
var div5 = document.getElementById('div5');
function printItem(item, paddingLevel) {
if (item.nodeType == document.ELEMENT_NODE) {
console.info(paddingLevel + item.tagName);
paddingLevel += " ...... ";
var childs = item.childNodes;
for (var i = 0; i < childs.length; i++) {
printItem(childs[i], paddingLevel);
}
}
}
printItem(div5, "");
.childrenвместо.childNodes?