DOM ツリービジュアライザー
無料のオンライン DOM ツリービジュアライザー。HTML を貼り付けると、ブラウザがそれを element・text・comment ノードにどう解析するか、見落としやすい空白テキストノードも含めて確認できます。
DOM ツリービジュアライザー
無料のオンライン DOM ツリービジュアライザー。HTML を貼り付けると、ブラウザがそれを element・text・comment ノードにどう解析するか、見落としやすい空白テキストノードも含めて確認できます。
DOM ツリーについて
DOM とは
ブラウザはページを読み込むとき、HTML を DOM（Document Object Model）と呼ばれるノードのツリーに解析します。各タグは element ノードに、タグ間のテキストは text ノードに、コメントは comment ノードになります。JavaScript はこのツリーをたどって編集することでページを読み書きし、元の HTML 文字列を直接触るわけではありません。
文字列とツリーの違い
あなたが書く HTML は単なる文字の並びです。ブラウザはそれを構造化されたツリーに変え、その過程で意図せず作られるノードもあります。タグ間の改行やインデントは空白テキストノードになります。それらを見れば、childNodes が思ったより多くを含む理由が分かります。
よくある質問
このテーマに関するよくある疑問と回答をまとめました。
childNodes と children の違いは何ですか？
children は element ノードのみを列挙しますが、childNodes は text ノード（空白を含む）や comment ノードも含みます。だから childNodes.length はしばしば大きくなります。このツールはすべてのノード種別を表示するので、その差が一目で分かります。
なぜ空白ノードがたくさんあるのですか？
HTML を読みやすくするために入れた改行やインデントは、DOM の中では text ノードになります。それらは実在するノードで、レイアウトや DOM の走査に影響することがあります。圧縮された HTML ではずっと少なくなります。
入力した HTML はサーバーに送信されますか？
いいえ。解析はブラウザ内蔵の DOMParser で完全にブラウザ内で実行され、貼り付けた内容が端末外に出ることはありません。