いぬっころブログ 
JavaScriptで取得したDOMをconsole.logを使ってコンソールに表示させると以下の画像のように表示が揺らぐことがあります。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="script.js" defer></script>
</head>
<body>
<h1 class="title">Hello</h1>
</body>
</html>let element = document.querySelector('.title');
console.log(element);
上の画像はHTML文字列が表示されている状態で、下の画像はDOMオブジェクトが表示されている状態です。
これらはリロードをすることで不規則に変化します。この現象はバグではなく正しい挙動になります。
この記事ではconsole.logで表示が揺らぐ原因と、HTML文字列かDOMオブジェクトを確実に表示させる方法について解説をしていきます。
内容以下の流れで解説していきます。
- なぜconsole.logでDOMの表示が変わるのか？
- outerHTMLでHTML文字列として表示する方法
- console.dirでDOMオブジェクトとして表示する方法
- まとめ
なぜconsole.logでDOMの表示が変わるのか？
冒頭のようにconsole.logでDOMを取得した際、HTML文字列とDOMオブジェクトのどちらかが不規則に表示されます。
let element = document.querySelector('.title');
console.log(element);このコードのようにDOMを取得してconsole.logはログを表示するメソッドであり、実際にログを表示させる機能はブラウザ側で提供されています。
そのため、console.logは問題なく動作していますが、ブラウザの処理のタイミングによってHTML文字列やDOMオブジェクトが表示されます。
つまり表示の違いはコードによるものでも、コードの実行順番でもなく、ブラウザの処理によって引き起こされています。
outerHTMLでHTML文字列として表示する方法
ここからはコンソールに表示させるDOMオブジェクトやHTML文字列のどちらかを必ず表示させる方法について解説していきます。
まずはHTML文字列の表示のさせ方についてです。
HTML文字列を表示させたい場合はouterHTMLを使います。コードの書き方は以下の通りです。
let element = document.querySelector('.title');
console.log(element.outerHTML);このように書くことでコンソール上に必ずHTML文字列として表示させることができます。
console.dirでDOMオブジェクトとして表示する方法
次はコンソール上にDOMオブジェクトを表示させる方法についてです。
DOMオブジェクトを表示させたい場合はconsole.dirを使います。コードの書き方は以下の通りです。
let element = document.querySelector('.title');
console.dir(element);こちらはdirメソッドに対して引数にDOMが格納された変数を渡すだけになります。
まとめ
今回はDOMをコンソール上に表示させた時に起きる表示の違いについてと、その解決策について見てきました。
DOMの表示をどちらか一方にしたいときはouterHTMLとconsole.dirを使い分けることで解決が可能となります。
最後まで読んでいただきありがとうございました！
