JavaScriptのDOMとは？仕組み・ノード・ツリー構造を初心者向けにわかりやすく解説
JavaScriptでHTMLを操作するために欠かせないのが DOM（Document Object Model） です。
DOM を理解すると、ページ内の要素を自由に取得・変更・追加・削除できるようになります。
DOMとは？
DOM（Document Object Model）は、W3C によって標準化された「HTML / XML 文書をプログラムから操作するための仕組み」です。
DOM の特徴：
- 特定のプログラミング言語に依存しない
- HTML / XHTML / XML をツリー構造として扱う
- JavaScript から文書内の要素を自由に操作できる
DOM では、文書を構成するすべての要素を ノード（Node） として扱います。
DOMで扱われる主なノード
- 要素ノード（例：<div>、<p>）
- 属性ノード（例：id=”section1″）
- テキストノード（例：「サンプル1」などの文字）
DOM は階層構造を持っているため、次のような関係で表現されます。
- 親ノード
- 子ノード
- 兄弟ノード
- 子孫ノード
JavaScript から DOM を利用することで、ページの内容を動的に変更したり、要素を追加したり、削除したりできます。
DOMツリーのイメージ
次のような HTML を例に、DOM がどのようなツリー構造になるか見てみましょう。
<html>
<head>
<title>サンプルページ</title>
</head>
<body>
<div id=”section1″>
<p>サンプル1</p>
<img src=”sample.jpg” alt=”解説図”>
</div>
</body>
</html>
<head>
<title>サンプルページ</title>
</head>
<body>
<div id=”section1″>
<p>サンプル1</p>
<img src=”sample.jpg” alt=”解説図”>
</div>
</body>
</html>
この HTML は DOM では次のようなツリー構造になります。
- html
- head
- title → テキストノード「サンプルページ」
- body
- div（id=”section1″）
- p → テキストノード「サンプル1」
- img（src / alt 属性）
- div（id=”section1″）
- head
このように、DOM は文書全体を「木（ツリー）」として扱い、JavaScript から自由に操作できるようにします。
まとめ
- DOM は HTML / XML をプログラムから操作するための仕組み
- 文書はツリー構造で表され、すべての要素がノードになる
- JavaScript から DOM を使うことで、ページ内容を自由に変更できる
- 要素ノード・属性ノード・テキストノードなどが存在する
