JavaScript DOM操作

# 経緯
２週間JavaScriptを学習し、DOM操作について理解が曖昧だったため、自分の記録用として記事を作成した。

# DOM
DOM（Document Object Model）とは、JavaScriptで扱えるオブジェクトの集まりのこと。
このdocumentオブジェクトがDOMの世界へのエントリーポイントとなっていて、便利なプロパティやメソッドが多数用意されている。

### 構造
DOMの構造は、WEBページ（HTML）をツリー状として表現している。このツリーには、文書のすべての要素（HTMLタグ）やテキスト、属性が含まれており、`ノード`としてツリーに組み込まれている。

```html
<!DOCTYPE html>
<html>
  <head>
    <title>自己紹介</title>
  </head>
  <body>
    <h1>こんにちは！</h1>
    <p>僕は初心者です。</p>
  </body>
</html>
```

このHTMLは、以下のようなDOMツリーとして表現される。
 ```
 Document
  └── html
        ├── head
        │     └── title
        │           └── "自己紹介"
        └── body
              ├── h1
              │     └── "こんにちは！"
              └── p
                    └── "僕は初心者です。"

 ```

 - html,head,body,h1,pなどが`ノード`としてツリーを構成。
 - それぞれのノードは、親（htmlが親）、子（h1やp）の関係性がある。

### 使い方
DOMを使うことで、JavaScriptからWebページの内容を動的に操作が可能。以下のように、ページ上のテキストを変更したり、要素を追加することができる。

```html:index.html
<!DOCTYPE html>
<html>
  <body>
    <h1 id="greeting">こんにちは！</h1>
    <button onclick="changeText()">テキストを変更</button>

    <script>
      function changeText() {
        // DOMを通じてh1のテキストを変更
        document.getElementById("greeting").innerText = "こんにちは、世界！";
      }
    </script>
  </body>
</html>
```
上記の例では、ボタンがクリックされると、テキストが「こんにちは！」から「こんにちは、世界！」に変わる。

```html
<h1 id="greeting">こんにちは！</h1>
<button onclick="changeText()">テキストを変更</button>
```
が
```html
<h1 id="greeting">こんにちは、世界！</h1>
<button onclick="changeText()">テキストを変更</button>
```
になる。

それぞれの挙動はざっと以下の通り。

- `<h1 id="greeting">こんにちは！</h1>`
テキストを表示。`id=greeting`属性は、JavaScriptで扱うために一意な識別子として設定。

- `<button onclick="changeText()">テキストを変更</button>`
「テキストを変更」というラベルを表示。`onclick="changeText()"` は、このボタンがクリックされたときに `changeText()`というJavaScriptの関数を実行することを指示。

- `function changeText()`
関数を定義。上述の通り、ボタンがクリックされると、この関数が実行。

- `document.getElementById("greeting").innerText = "こんにちわ、世界";`
`document.getElementById()` は、HTMLから特定のidを持つ要素を取得するdocumentオブジェクトのメソッド。ここでは、id="greeting" を持つ h1オブジェクトを取得。取得したオブジェクトに対して、`innerText`プロパティを「こんにちは、世界！」へ変更。

### Chromeのデベロッパーツールで確認
それでは、chromeのデベロッパーツールを活用して中身をみていきたい。デベロッパーツールでオブジェクト構造を確認でき、プロパティの`innerText`が変更されていることが確認できる。

- `index.html`をChromeで開く。
![img1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3838211/dec7a4aa-a26a-5ad8-7089-904364e79f73.png)

- デベロッパーツールを開く。Macの場合は、option+command+igaでショートカット。
![src2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3838211/7ebb145a-282c-e16c-a123-4165f7549948.png)

- `document.getElementById("greeting")`の中身を確認したい。定数`test`に代入し、`console.dir()`で表示すると、取得した要素のオブジェクトの中身を確認することができる。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3838211/f7c3d706-7e6d-3248-9e11-2af855455c3c.png)

- 下へスクロールすると、`innerText:"こんにちは！`が確認できる。
![img4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3838211/06d8e67f-ef46-9de6-0213-f7d44a68bf04.png)

- `button`をクリック後、再度同じように取得した要素を確認すると、`innerText:"こんにちは、世界！"`となっている。innerTextプロパティがクリックイベントにより、変更されたことが確認できた。
![img5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3838211/07db81b8-d2c2-07e2-0627-0a0378a83309.png)

### 要素の取得方法
`getElementById`でidで取得する以外にもタグとクラスで指定できるメソッドもある。

```javascript
//aタグを複数取得
document.getElementsByTagName('a')
```
```javascript
//classがredの要素をを複数取得
document.getElementsByClassName('red')
```
さらに、柔軟な対応ができる`querySelector`メソッドもある。指定の仕方は、CSSセレクターの書き方と同じ。
```javascript
//最初に見つけたh1要素を返す
document.querySelector('h1');
```
```javascript
//最初に見つけたidがredの要素を返す
document.querySelector('#id');
```
```javascript
//最初に見つけたclassがbigを返す
document.querySelector('.big');
```
```javascript
//対象となるp要素全てを取得
document.querySelectorAll('p')
```

### 要素に対してできる操作
取得した要素に対して、さまざまな操作を行うことができる。例えば：

テキストの変更:`innerText`や`textContent`を使って、要素内のテキストを変更。
```javascript
const element = document.getElementById("greeting");
element.innerText = "こんにちは、世界！"; // h1のテキストを変更
```
スタイルの変更：`style`プロパティを使って、要素のCSSスタイルを変更。
```javascript
const element = document.getElementById("greeting");
element.style.color = "red"; // h1の文字色を赤に変更
```
クラスの操作：`classList`を使って、要素のクラスを操作。
```javascript
const element = document.getElementById("greeting");
element.classList.add("highlight"); // h1にhighlightクラスを追加
```
イベントの設定：`addEventListener`を使って、対象となるイベント（下記はクリック）があった時の挙動を設定。特定のイベントが発生した時、複数の処理を実行したい時にも使用。
```javascript
const element = document.getElementById("greeting");
element.addEventListener("click", function() {
  alert("クリック！!!");
});
```
### なぜ必要か
JavaScriptを使ってDOMを操作することで、ウェブページに動きやアニメーションを加えることができ、インタラクティブな機能の追加が可能。
インタラクションとは、相互作用」、「双方的」という意味合いで、ユーザーとシステムの間で、リアルタイムにやり取りが可能になり、より魅力的で使いやすいウェブサイト作れる。

# 最後に
今回の記事を通して、JavaScript の DOM 操作に関する基礎的な知識を整理できた。今後は、これを活かして、さらに複雑なウェブアプリケーションの構築や、より高度なユーザー体験を提供するためのスキルを磨いていきたいと思う。