はじめに
DOM（Document Object Model）は、HTMLやXML文書をプログラムから操作するためのAPI（Application Programming Interface）です。DOMは、文書の構造をツリー構造として表現し、プログラムからそのツリーの各部分にアクセスしたり変更したりできるようにします。JavaScriptを使ってWebページを動的に操作する際の基盤となる技術です。
DOMの基本構造
DOMは、文書の各要素をノード（Node）として扱い、これらのノードをツリー構造（DOMツリー）で表現します。ノードにはいくつかの種類がありますが、主なノードタイプは以下の通りです。
1. 要素ノード（Element Node）:
- HTMLの各タグ（例：
<div>,<p>,<a>）に対応します。 - ノードタイプ：
Node.ELEMENT_NODE
2. テキストノード（Text Node）:
- 要素の中のテキストに対応します。
- ノードタイプ：
Node.TEXT_NODE
3. 属性ノード（Attribute Node）:
- 要素の属性（例：
class="example"）に対応します。 - ノードタイプ：
Node.ATTRIBUTE_NODE
4. コメントノード（Comment Node）:
- HTMLコメント（例：
<!-- コメント -->）に対応します。 - ノードタイプ：
Node.COMMENT_NODE
DOMツリーの例
HTML文書例
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>DOMの例</title>
</head>
<body>
<h1>Hello, World!</h1>
<p>これは段落です。</p>
</body>
</html>
このHTML文書のDOMツリーは以下のようになります。
Document
└── html
├── head
│ ├── meta
│ └── title
│ └── "DOMの例"
└── body
├── h1
│ └── "Hello, World!"
└── p
└── "これは段落です。"
DOM操作の基本
要素の取得
1. getElementById:
- 特定のIDを持つ要素を取得します。
const element = document.getElementById('myElement');
2. getElementsByClassName:
- 特定のクラスを持つ要素のリストを取得します。
const elements = document.getElementsByClassName('myClass');
3. getElementsByTagName:
- 特定のタグ名を持つ要素のリストを取得します。
const elements = document.getElementsByTagName('div');
4. querySelector:
- 指定したCSSセレクタにマッチする最初の要素を取得します。
const element = document.querySelector('.myClass');
5. querySelectorAll:
- 指定したCSSセレクタにマッチするすべての要素のリストを取得します。
const elements = document.querySelectorAll('div.myClass');
要素の作成と追加
1. createElement:
- 新しい要素を作成します。
const newDiv = document.createElement('div');
2. appendChild:
- 指定した要素を子要素として追加します。
const parentElement = document.getElementById('parent');
parentElement.appendChild(newDiv);
3. insertBefore:
- 既存の子要素の前に新しい要素を挿入します。
const referenceElement = document.getElementById('reference');
parentElement.insertBefore(newDiv, referenceElement);
要素の削除
1. removeChild:
- 指定した子要素を削除します。
parentElement.removeChild(newDiv);
属性の操作
1. setAttribute:
- 要素に新しい属性を追加または既存の属性を変更します。
newDiv.setAttribute('id', 'newDiv');
2. getAttribute:
- 要素の指定した属性の値を取得します。
const idValue = newDiv.getAttribute('id');
3. removeAttribute:
- 要素から指定した属性を削除します。
newDiv.removeAttribute('id');
テキストの操作
1. textContent:
- 要素のテキストコンテンツを取得または設定します。
newDiv.textContent = 'Hello, World!';
2. innerHTML:
- 要素のHTMLコンテンツを取得または設定します。
newDiv.innerHTML = '<p>Hello, World!</p>';
イベントの処理
イベントリスナーを追加して、ユーザーの操作に応じた動作を実装できます。
const button = document.getElementById('myButton');
button.addEventListener('click', function() {
alert('Button clicked!');
});