Question

我试图以递归方式打印DOM内容。

(function print (node) {
    for (var i = 0, elem; i < (elem = node.childNodes[i]); i++) {
        print(elem);
    }
})(document.documentElement);

当我在浏览器控制台中激活我的代码时，我得到了

undefined

我做错了什么？

Answer 1

试试这个：（它适用于chrome，我不确定每个浏览器是否都有相同的文档结构）

(function print (node) {
    console.log(node)
    var childNodes = node.childNodes;
    for (var i = 0; i < childNodes.length; i++) {
        print(childNodes[i]);
    }
})(document);

编辑：警告，控制台打印速度相当慢，请注意：P
更新：已删除＆＃34; elem＆＃34;因为它没有使用，我只是忘了删除它

Answer 2

function traverseDOM(node){
    var result = node.tagName;
    if (node.hasChildNodes()) {
      var child = node.firstChild;
      while (child) {
        if (child.nodeType === 1) {
          result += traverseDOM(child)
        }
        child = child.nextSibling;
      }
    }
    return result;
  }
 console.log(traverseDOM());

Answer 3

取决于它是激光打印机还是点阵打印机。

我建议使用TreeWalker API，以此为生。

var node;
var walker = document.TreeWalker(document, 
    NodeFilter.SHOW_ELEMENT | NodeFilter.SHOW_TEXT);

while (node = walker.nextNode) { console.log(node); }

这也可以避免任何递归/堆栈溢出问题，尽管实际上即使在非常深的DOM的情况下也可能不是问题。

Answer 4

function print(document){
    var data=document.documentElement;
    for(var i=0;i<data.childNodes.length;i++)
    {
        print(data.childNodes[i]);
    }
}
console.log(documentdocumentElement)

如何递归打印DOM内容？

4 个答案: