如何在firebug中遍历我的HTML DOM？

Question

这看起来应该非常简单，但它让我受伤了。

我希望能够在firebug控制台中探索DOM树（可视化），就像我可以探索html页面一样。当我点击DOM面板（所有选项设置为'display'）时，我可以看到我的jQuery和Javascript对象。 （它们在列表的顶部突出显示），但我看不到我的页面节点（例如标题div，页脚div，h1元素）。

还有其他条目，如窗口，文档等，看起来很有前途但似乎没有把我带到任何地方（除了循环）。

如果我在HTML面板中选择一个元素，那么在屏幕的右侧选择DOM，它会说'没有为这个对象显示的属性'。这对我来说也不合适。

我错过了什么？

Answer 1

转到Firebug中的DOM按钮。在您的搜索区域中输入“document”。点击“+”符号并将其打开。点击“body”，依此类推。一切都从'window'开始。

提示：

大部分时间window都是隐含的，因此您不必说window.document.getElementById();，甚至window.onload = function(){*stuff here*/}。但是，如果您的测试是否存在，则必须说window.onload。 document是window的属性，具有一系列自己的属性和方法。

Answer 2

当您转到DOM面板时，默认情况下会看到window全局对象的属性。要在此处查找HTML节点，您必须从document s后代选择window，然后选择head或body - 然后在每个级别中进一步展开{{1} }或childNodes。

接下来，当您在HTML面板中选择某些内容时，可以右键单击它并选择“在DOM面板中检查”。

最后但并非最不重要的是，当您有一个项目，在HTML面板中选择children或textarea时，您可以在Firebug中通过input引用它。然后，您可以通过编写$0等来检查其所有DOM属性。请注意面板名称左侧的“显示命令行弹出”按钮，这样就可以同时查看控制台和HTML面板。 / p>

此外，您可以转到DOM面板并使用Firebug的“Inspect element”按钮在页面上定位，使用鼠标，您希望在DOM面板中看到的特定元素。