getElementByIdのコンソール出力結果でb=[object HTMLDivElement]と出ました。

Question

b = document.getElementById("test");
console.log("b="+b);

としたらタイトルのような表示になりました。
しかし私が想定したのはこういうやつです。
https://www.sejuku.net/blog/27019

上記サイトの一番最初のHello worldを出力させる書き方と同じ書き方なのに出力結果が違うのはどうしてでしょうか。

Answer 1

コンソールでHTML要素が特殊な表示になるのは、直接console.logなどに渡した場合に限られます。

"b="+bとすれば、足し算をした時点でHTML要素も文字列として処理されてしまうので、b=[object HTMLDivElement]という文字列が生成して、それがconsole.logに渡ることとなります。

Comments

[yamagata_user]

いろいろな質問にご回答くださり誠にありがとうございます。
bには既にHTMLの記述全体がそのまま格納されていると思うので、「"b="」という文字列を加えただけでconsole.logの処理の過程でそれが[object HTMLDivElement]に書き換わるということは全く想像できずびっくりしました。
確かにconsole.log(b);としたら正常にhtml全体がそのまま表示されました。
ちなみにこれはconsole.logのバグなどではなく専門家の方々には余裕で予測できる当然の動きなのでしょうか？

[maisumakun]

上にも書いていますが、「console.logの処理の過程で」はなく、「JavaScriptの足し算」のほうの性質です。

[yamagata_user]

「("b="+b);」の部分では、足される直前まではbにはHTML要素全体がそのままの形で格納されていて、足す処理が始まり、終わった時点で[object HTMLDivElement]に変換されるということでしょうか。
そうだとするとこれはどうしてなのでしょうか。
javascriptはそういう仕様だから以外には説明がつかない現象なのでしょうか。

[maisumakun]

JavaScriptで「文字列+オブジェクト」とすると、オブジェクトのままでは足し算できないので、valueOf()やtoString()といったメソッドを使って変換します。

HTMLエレメントの場合、valueOf()は存在せず、toString()はObjectから継承した、[object 種類]を返すものなので、toStringの結果は[object HTMLDivElement]となります。

詳しくは、仕様書を確認してください（もっとも、JavaScriptは演算子オーバーロードがないので、何が起きるのか確信を持っているのでなければ、「文字列+オブジェクト」のような変な演算はしない、というのが適切かと思います）。

[otn]

> 足される直前まではbにはHTML要素全体がそのままの形で格納されていて、

ちがいます。文字列じゃなくて、オブジェクトという、あなたがまだ学んでいない物が格納されています。
一通りJavaScriptを学び終えると分かると思いますので、今はそういうものだと思って下さい。

[yamagata_user]

なんとなくですがわかりました。
ありがとうございました。