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>