【JavaScript】getElementById("") の結果に子ノードもコンソールに表示された理由をまとめてみた
疑問
以下のコードを実行した結果、コンソールに "id" が "bg" の div 要素が出力されると予想しましたが、結果は以下のようになりました。
このとき、h1 要素も一緒に出力されたことに疑問を持ちました。
なぜなら、getElementById()メソッドは、指定された単一のノードを取得するはずなのに、h1 要素も一緒に出力されたからです。
<div>
<p id="hw">Hello World</p>
<div id="hg">
<h1>Have a good day!</h1>
</div>
</div>
let ele = document.getElementById("hg");
console.log(ele);
<div id="hg">
<h1>Have a good day!</h1>
</div>
この記事では、その理由をメモとして残していきます。
結論
「取得」と「表示」の違いによるもの
取得
document.getElementById("hg") のように、特定のメソッドで要素を取得する行為そのものは、あくまで指定されたノード1つをJavaScriptのオブジェクトとして手に入れます。このオブジェクトには、そのノードが持つすべての情報（属性、子ノードへの参照など）が含まれています。
表示
console.log() は、取得したそのオブジェクトを、開発者が見やすいように視覚化して表示する機能です。この表示の際に、オブジェクトが持っている子ノードの情報も一緒に展開して、HTMLのツリー構造として見せてくれているのです。
console.log() は、そのオブジェクトを受け取ったときに、単に「このオブジェクトは子ノードへの参照を持っています」と表示するのではなく、参照をたどって子ノードの中身も展開し、視覚的にわかりやすいHTMLツリーの形で表示するという機能を持っているようです。
解説
getElementById()は何を返すのか？
getElementById() は Document インターフェイスのメソッドで、 id プロパティが指定された文字列に一致する要素を表す Element オブジェクトを返します。
※ https://developer.mozilla.org/ja/docs/Web/API/Document/getElementById より引用
このメソッドによって、Elementオブジェクトが返されるようです。
このメソッドは、指定された id 属性を持つHTML要素をドキュメントの中から探し出し、その要素を返します。id はHTMLドキュメント内で一意であるべきなので、このメソッドは常に単一の要素を返します。
変数の格納
let ele = document.getElementById("hg");
このメソッドが返した要素オブジェクトは ele という変数に格納されます。
つまり、この ele という変数にはオブジェクトが格納されているということです。
この要素オブジェクトには、タグ名、属性、内容など、その要素に関するすべての情報が含まれています。
コンソールへの出力
console.log(ele) を実行すると、JavaScriptエンジンが ele に格納されている要素オブジェクトを解析し、開発者が理解しやすいようにHTML要素の形式でコンソールに表示します。
そのため、ele は単なるテキストではなく、以下のHTML要素そのものを表すオブジェクトということになります。
<div id="hg">
<h1>Have a good day!</h1>
</div>
このオブジェクトを介して、要素のテキストを変更したり、スタイルを変更したりといった操作が可能になります。
まとめ
今回は、JavaScriptを使っていく中で思った素朴な疑問をまとめてみました。
参考にしていただけましたら幸いです。
最後までお読みいただき、ありがとうございました。
参考URL
Discussion