console.logで要素をデバッグするとき[object HTMLElement]こんなのが表にされるよね

要素を取得して内容が見たいなってときにgetElementByIdやquerySelectorで要素を取得してconsole.log()で表示させるときはよくあります。普通にテキストの内容が表示されればいいのですが、たまに [object HTMLElement] みたいな文字列が表示されてしまうことがあります。なぜこうなってしまうのか、どうすれば要素の内容が表示されるのか調べてみました

[object HTMLElement]は、JavaScriptでDOM要素を文字列として表示しようとしたときのデフォルトの文字列表現です。

JavaScriptでは、オブジェクトを文字列に変換する場合（例えば、console.log()で出力するときやテンプレートリテラルで文字列結合するときなど）、オブジェクトのtoString()メソッドが呼び出されます。DOM要素のtoString()メソッドのデフォルトの実装は、その要素の型（HTMLElementなど）を[object ...]の形式で返すようになっています。

したがって、次のようにDOM要素を文字列として出力しようとすると、[object HTMLElement]が表示されます。

const div = document.createElement('div');
console.log(div);  // 出力: <div></div> （ブラウザのコンソールには要素として表示される）
console.log(div.toString());  // 出力: [object HTMLElement]
console.log(`Element: ${div}`);  // 出力: Element: [object HTMLElement]

要素の特定のプロパティや内容を出力したい場合は、そのプロパティやメソッドを指定する必要があります。例えば：

• div.textContent: 要素のテキスト内容
• div.outerHTML: 要素の外部HTML（開始タグ、内容、終了タグを含む）
• div.innerHTML: 要素の内部HTML（内容のみ）

これらのプロパティやメソッドを使用することで、要素の内容や構造を文字列として取得・出力できます。