如何在 Google Chrome 调试器控制台中获取对 DOM 树中节点的引用答案

【问题标题】：How to get a reference to node in DOM tree in Google Chrome debugger console如何在 Google Chrome 调试器控制台中获取对 DOM 树中节点的引用
【发布时间】：2010-02-22 08:16:47
【问题描述】：

在 Google Chrome 调试器中，我经常想要获取对 DOM 树中某个节点的引用。我可以单击“放大镜”按钮，然后在浏览器窗口中单击所需的元素，以在调试器中显示的 DOM 树中选择相应的节点。但是如何在控制台中获取对该节点的引用？

如果元素有 id，document.getElementById 可以工作，但如果没有 id，是否有更好的替代 XPath 或使用 children 手动遍历 DOM 树的方法？

如果 XPath 是最好的方法，有没有比这样做更好的方法：

var evaluator = new XPathEvaluator();
var result = evaluator.evaluate("//div", document.documentElement, null,
             XPathResult.FIRST_ORDERED_NODE_TYPE, null);

每次都打字很痛苦。

【问题讨论】：

标签： dom google-chrome debugging

【解决方案1】：

如果在元素面板中选择了某个元素，那么您可以在控制台中借助特殊变量 $0 使用它的属性。

【讨论】：

这很好，很容易知道。

【解决方案2】：

一个相当好的解决方案是从getElementsByTagName 返回的数组中选择所需的元素。

【讨论】：