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

Question

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

我希望能够在 firebug 控制台中(以可视方式)浏览 DOM 树，就像我浏览 html 页面一样。当我单击 DOM 面板时(所有选项都设置为“显示”)，我可以看到我的 jQuery 和 Javascript 对象。 (它们在列表顶部突出显示)，但我看不到我的页面节点(例如页眉 div、页脚 div、h1 元素)。

还有其他条目，例如窗口、文档等，它们看起来很有前途，但似乎不会带我去任何地方(除了在循环中)。

如果我在 HTML 面板中选择一个元素，然后在屏幕的右侧选择 DOM，它会显示“此对象没有要显示的属性”。这对我来说也不对。

我错过了什么？

Answer 1

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

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

最后但同样重要的是，当你有一个项目时，比如在 HTML 面板中选择了 textarea 或 input，你可以通过 $0 引用它> 在 Firebug 中。然后你可以通过编写 $0.value 等检查它的所有 DOM 属性。注意面板名称左侧的“显示命令行弹出”按钮，这使得可以在以下位置看到控制台和 HTML 面板同时。

此外，您还可以转到 DOM 面板并使用 Firebug 的“检查元素”按钮在页面上使用鼠标定位您想要在 DOM 面板中查看的特定元素。