在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']")

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