HTMLのnode(ノード)とは何かを初心者向けに解説。DOMツリーの基本概念と、要素・テキスト・コメントなど代表的なnodeの種類をやさしく紹介します。
HTMLのnodeとは?基本の考え方
nodeとは?DOMツリーを構成する最小単位
- nodeは、ブラウザがHTMLを解析した結果できる「DOMツリー」の部品です。
- タグだけでなく、テキストやコメント、doctypeなども含みます。
- 画面に見える・見えないに関係なく、DOM上に存在するものをnodeと呼びます。
なぜnodeを理解する必要があるのか
- JavaScriptで操作する相手が「要素」ではなく「node」全体だからです。
- イベントの伝播や再描画など、挙動の理解に直結します。
- アクセシビリティやSEOでは、DOM構造が意味構造そのものになるためです。
よく使うnodeの種類(Document・Element・Text・Comment)
- Document(文書ノード):
documentオブジェクトとして扱う、最上位のnode。 - Element(要素ノード):
<div>や<p>など、タグ部分。 - Text(テキストノード):要素内の文字列。空白や改行も含まれる場合があります。
- Comment(コメントノード):
<!-- 〜 -->で囲まれたコメント。
そのほかの重要なnode
- DocumentFragment:一時的なコンテナとして使うnode。
- DocumentType:
<!DOCTYPE html>を表すnode。
簡単な具体例でnodeを確認(pタグとテキストの関係)
<p>Hello</p>
- p 要素ノード
- “Hello” テキストノード
コメントも立派なnode
<!-- メモ: ここは後で修正 -->
- DOM上では Commentノードとして存在します。
まとめ(第1回のポイント)
- nodeは、DOMツリーを構成する最小単位の総称です。
- よく使うnodeは、Document / Element / Text / Commentの4種類です。
次回は「DOMツリーの階層構造」と「nodeと要素の違い」を図解で解説します。


