DOM 堆栈跟踪找到所有 DOM 对象并列出它们答案

【问题标题】：DOM stack trace find all the DOM Objects and list them outDOM 堆栈跟踪找到所有 DOM 对象并列出它们
【发布时间】：2012-01-23 23:05:53
【问题描述】：

是否有我可以附加到浏览器的工具/实用程序，它可以逐字扫描给定页面上的所有对象并吐出可读的元素堆栈？或者有什么方法我什至可以用 jQuery 或其他东西制作一个？

我想要或做的是从字面上找到正文标签之间的所有元素，并将它们列出来，尽可能将它们分组。这样我就可以为我的团队建立一个文档，并在我们需要重新访问的时候跟踪什么在哪里等等。

【问题讨论】：

所有 DOM 检查器都允许您查看整个 DOM 层次结构。 Chrome、Safari 和 Opera 内置了一个 DOM 检查器。 Firebug 是 Firefox 的附加组件。我不知道有什么工具可以让你打印出来。

标签： javascript jquery dom stack-trace

【解决方案1】：

大多数浏览器都有开发者工具。在 IE 和 Chrome 中按 F12，对于 Firefox 不确定。

【讨论】：

【解决方案2】：

Firebug、Firefox 工具栏、IE 工具栏 (F12)、Chrome 开发工具（又是 F12...），那里有很多很多 DOM 检查器工具（或者已经内置在浏览器中）

【讨论】：

【解决方案3】：

如果您只是想要页面上所有元素的列表（以及它们的子元素最高一级），请尝试以下操作：

$("body").find("*").each(function(){
    document.write( this.nodeName.toLowerCase() + "<br>" )
    if( $(this).children().length > 0 ){
        $(this).children().each(function(){
            document.write( "<ul>" );
            document.write( "<li>" + this.nodeName.toLowerCase() + "</li>" );
            document.write( "</ul>" );
        }); 
    }
});

Example.

不过，this answer 提供了更好的方法并列出了元素的所有子元素。

【讨论】：

【解决方案4】：

大多数浏览器中内置的开发者工具会向您展示整个 DOM 的当前状态。您还可以实时编辑 DOM（结构和 CSS）。

其他一些方便的信息花絮：

在 Chrome（我相信 Firebug）中，您可以单击 DOM 中的一个元素（因此它被突出显示），然后在控制台视图中，您选择的任何内容都可以通过“$0”访问。它们还包括一个不错的 copy() 函数，该函数将 DOM 文本放到剪贴板上，准备好粘贴到文本编辑器中：

在“元素”视图中，单击一个元素（例如标签）。
点击进入控制台
```
copy($0)
```
打开文本编辑器，然后粘贴。

另见：

print($0)

http://code.google.com/chrome/devtools/docs/console.html

【讨论】：