未定义的子节点

Question

我在 html 中有一些代码，我想使用递归函数打印标签。问题是 childNodes returns 一个元素对于每个 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, not an Element. You can check that via 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, "");

未定义的子节点

Undefined childNode

html

javascript

child-nodes