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