カテゴリー︎： 【JavaScript】
たとえば、hoge変数にオブジェクトを格納して
console.log(hoge)とすれば
出力結果 → <div class="hoge">ほげほげ</div>
という期待通りの結果が出力されます。
ちなみに
console.log()はコンソールに出力するための関数です。
引数に渡した値をそのまま出力します。
しかし
console.log(” this is hoge : “+hoge)とすると
出力結果 → this is hoge : [object HTMLDivElement]
となり、期待した結果にはならない。
なぜかというと
出力する文字列の最後にhoge変数を結合していて
hoge変数がオブジェクトである場合は、JavaScriptは
そのオブジェクトのデフォルトの文字列表現が出力されるからです。
もうちょい詳しく
[object HTMLDivElement]という文字列は、
hoge変数がHTMLのdiv要素である場合の文字列表現です。
この場合、hoge変数がDOM要素オブジェクトであり、console.log()はそのオブジェクトを文字列に変換しようとします。
なので、” this is hoge : “という文字列と hoge変数の値を結合したときに hoge変数であるDOM要素オブジェクトは[object HTMLDivElement]という文字列に変換されて、出力されたのですね。
まあ +演算子で文字列を結合をしなければ、ちゃんと出力されるのは、理解したけど、、、
文字列とhoge変数を同時に出力したい！！
どうしたらいいの？
outerHTMLプロパティを使いましょう！
結論としてはこのコードで解決します。
console.log(" this is hoge : "+hoge.outerHTML);
出力結果 → this is hoge : <div class="hoge">ほげほげ</div>
これで、期待通りの出力結果がでました。
JavaScript の outerHTMLプロパティは、その要素自身と中身のHTMLを取得（変更）できます。