DOM（Document Object Model）の基本

## はじめに
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文書例

```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ツリーは以下のようになります。

```bash
Document
└── html
    ├── head
    │   ├── meta
    │   └── title
    │       └── "DOMの例"
    └── body
        ├── h1
        │   └── "Hello, World!"
        └── p
            └── "これは段落です。"
```

## DOM操作の基本

### 要素の取得

#### 1. **`getElementById`**:
   - 特定のIDを持つ要素を取得します。
   ```javascript
   const element = document.getElementById('myElement');
   ```

#### 2. **`getElementsByClassName`**:
   - 特定のクラスを持つ要素のリストを取得します。
   ```javascript
   const elements = document.getElementsByClassName('myClass');
   ```

#### 3. **`getElementsByTagName`**:
   - 特定のタグ名を持つ要素のリストを取得します。
   ```javascript
   const elements = document.getElementsByTagName('div');
   ```

#### 4. **`querySelector`**:
   - 指定したCSSセレクタにマッチする最初の要素を取得します。
   ```javascript
   const element = document.querySelector('.myClass');
   ```

#### 5. **`querySelectorAll`**:
   - 指定したCSSセレクタにマッチするすべての要素のリストを取得します。
   ```javascript
   const elements = document.querySelectorAll('div.myClass');
   ```

### 要素の作成と追加

#### 1. **`createElement`**:
   - 新しい要素を作成します。
   ```javascript
   const newDiv = document.createElement('div');
   ```

#### 2. **`appendChild`**:
   - 指定した要素を子要素として追加します。
   ```javascript
   const parentElement = document.getElementById('parent');
   parentElement.appendChild(newDiv);
   ```

#### 3. **`insertBefore`**:
   - 既存の子要素の前に新しい要素を挿入します。
   ```javascript
   const referenceElement = document.getElementById('reference');
   parentElement.insertBefore(newDiv, referenceElement);
   ```

### 要素の削除

#### 1. **`removeChild`**:
   - 指定した子要素を削除します。
   ```javascript
   parentElement.removeChild(newDiv);
   ```

### 属性の操作

#### 1. **`setAttribute`**:
   - 要素に新しい属性を追加または既存の属性を変更します。
   ```javascript
   newDiv.setAttribute('id', 'newDiv');
   ```

#### 2. **`getAttribute`**:
   - 要素の指定した属性の値を取得します。
   ```javascript
   const idValue = newDiv.getAttribute('id');
   ```

#### 3. **`removeAttribute`**:
   - 要素から指定した属性を削除します。
   ```javascript
   newDiv.removeAttribute('id');
   ```

### テキストの操作

#### 1. **`textContent`**:
   - 要素のテキストコンテンツを取得または設定します。
   ```javascript
   newDiv.textContent = 'Hello, World!';
   ```

#### 2. **`innerHTML`**:
   - 要素のHTMLコンテンツを取得または設定します。
   ```javascript
   newDiv.innerHTML = '<p>Hello, World!</p>';
   ```

### イベントの処理

イベントリスナーを追加して、ユーザーの操作に応じた動作を実装できます。

```javascript
const button = document.getElementById('myButton');
button.addEventListener('click', function() {
    alert('Button clicked!');
});
```