在Chrome控制台中选择DOM元素

Question

我对以下内容感到有点困惑:假设我有一个id为的段落元素para.如果我说,使用Chromes控制台

document.getElementById("para")

我返回了HTML片段<p id="para">....</p>,而如果我使用例如Javascript库D3的选择方法并说

d3.select("#para")

我返回DOM节点,可以访问段落元素的所有属性和方法.

为何如此区别？

Answer 1

默认情况下,在Chrome中记录DOM节点时,它会显示为标记.将DOM节点记录为普通对象使用console.dir.原因d3.select("#para")显示,作为普通对象,此方法可能不返回DOM节点,而是返回包裹DOM节点的对象.

console.dir(document.getElementById("para"));

Answer 2

我认为最好的方法是这样的：

• 打开 Chrome 控制台
• 类型：$x("//input[@id='para']")

单击找到的元素，您还可以看到它被选中