DOM概要

DOM（Document Object Model）はJavaScriptがウェブページを操作するためのインターフェースです。HTML文書をオブジェクトツリーとして表現し、スクリプトによる操作を可能にします。

ノードとノードツリー

DOMの基本単位はノードで、以下の7種類が存在します：

• Document：文書全体のルートノード
• DocumentType：doctype宣言
• Element：HTML要素（例: <div>）
• Attr：要素の属性
• Text：テキストコンテンツ
• Comment：コメント
• DocumentFragment：文書フラグメント

これらのノードがツリー構造を形成し、JavaScriptによる操作対象となります。

主要なDOMインターフェース

Nodeインターフェース

全てのDOMノードが継承する基本インターフェースです。共通プロパティとメソッドを提供します。

主要プロパティ

• textContent：ノードのテキスト内容
• baseURI：文書の絶対URL
• nextSibling/previousSibling：隣接ノード
• parentNode/parentElement：親ノード
• firstChild/lastChild：最初/最後の子ノード
• childNodes：子ノードコレクション

主要メソッド

• appendChild()：子ノード追加
• insertBefore()：指定位置へのノード挿入
• removeChild()：子ノード削除
• replaceChild()：子ノード置換

実装例

// テキストコンテンツ取得
const container = document.querySelector('#contentArea');
console.log(container.textContent);

// ノード追加
const newParagraph = document.createElement('p');
document.body.appendChild(newParagraph);

// ノード挿入
const reference = document.getElementById('insertPoint');
const insertedNode = parentElement.insertBefore(newParagraph, reference);

// ノード削除
const removable = document.getElementById('oldElement');
if (removable.parentNode) {
  removable.parentNode.removeChild(removable);
}

プロパティ詳細

textContentはHTMLタグを無視して全てのテキストを取得します：

<div id="sample">テキスト<span>例</span></div>
document.getElementById('sample').textContent; // "テキスト例"

baseURIは文書の絶対URLを返します：

// 現在のURL: https://example.com/page
console.log(document.baseURI); // "https://example.com/page"

nextSiblingとpreviousSiblingで隣接ノードを取得：

const firstItem = document.getElementById('item1');
const secondItem = document.getElementById('item2');
console.log(firstItem.nextSibling === secondItem); // true