javascript - 在 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"));