javascript - 未定义的子节点

Question

我在 html 中有一些代码，我想使用递归函数打印标签。问题是 childNodes 返回一个元素，该元素对于每个 li 项目都是未定义的。

代码。

        var div5 = document.getElementById('div5');

        function printItem(item, paddingLevel) {

            console.log(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

谢谢你，祝你有美好的一天！！！

Answer 1

您需要测试您正在打印的项目，因为它可能是Text node，而不是Element。您可以通过 进行检查nodeType，或者只是检查节点是否具有childNodes：

var div5 = document.getElementById('div5');

function printItem(item, paddingLevel) {

  if (item.nodeType === 1) { // *** 1 = Element
    console.log(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>

Answer 2

那是因为childNodes不过滤没有tagName属性的文本节点。

使用条件来跳过这些节点，如下所示：

var div5 = document.getElementById('div5');

function printItem(item, paddingLevel) {

    if (item.nodeType == document.ELEMENT_NODE) {
        console.log(paddingLevel + item.tagName);
        paddingLevel += " ...... ";


        var childs = item.childNodes;

        for (var i = 0; i < childs.length; i++) {
            printItem(childs[i], paddingLevel);
        }

    }

}

printItem(div5, "");