HTML递归打印标签问题：childNodes返回undefined元素

嘿，我来帮你搞定这个问题！你遇到的undefined其实是childNodes的特性导致的——它会返回元素的所有子节点，包括文本节点（比如标签之间的空格、换行符）、注释节点这类非元素节点，而这些节点是没有tagName属性的，所以打印时就会出现undefined。

下面给你两种简单的解决办法：

方法一：过滤非元素节点 #

在递归处理前，先判断当前节点是不是元素节点（元素节点的nodeType值为1），只有符合条件的节点才继续打印和递归：

var div5 = document.getElementById('div5');
function printItem(item, paddingLevel) {
  // 仅处理元素节点
  if (item.nodeType === 1) {
    console.log(paddingLevel + item.tagName);
    paddingLevel += " ...... ";
    var childs = item.childNodes;
    for (var i = 0; i < childs.length; i++) {
      printItem(childs[i], paddingLevel);
    }
  }
}
printItem(div5, "");

方法二：用children替代childNodes #

如果你的需求只是打印元素标签，完全可以直接用children属性——它只会返回当前元素的元素类型子节点，自动过滤掉文本、注释这类节点，代码更简洁：

var div5 = document.getElementById('div5');
function printItem(item, paddingLevel) {
  console.log(paddingLevel + item.tagName);
  paddingLevel += " ...... ";
  // 仅获取元素子节点，无需额外过滤
  var childs = item.children;
  for (var i = 0; i < childs.length; i++) {
    printItem(childs[i], paddingLevel);
  }
}
printItem(div5, "");

简单总结下：

• childNodes 灵活性高，适合需要处理所有类型节点的场景，但要手动过滤；
• children 更贴合你现在的需求，直接拿到元素节点，省掉过滤步骤。

内容的提问来源于stack exchange，提问作者thmmy95