如何递归打印DOM内容

How can I print DOM Content recursively?

本文关键字：打印 DOM 内容 递归 何递归      更新时间：2023-09-26

我正在尝试递归打印DOM内容。

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

当我在浏览器控制台中启动代码时，我会得到

undefined

我做错了什么？

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

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

编辑：警告，控制台打印速度较慢，请注意：p
更新：删除了"elem"，因为它没有被使用，我只是忘记删除它

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());

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

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

var node;
var walker = document.TreeWalker(document, 
    NodeFilter.SHOW_ELEMENT | NodeFilter.SHOW_TEXT);
while (node = walker.nextNode) { console.log(node); }

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

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