[JavaScript]DOM操作のまとめ

こんにちは！
JavaScriptのDOM操作を使って画面操作を行う事があるのですが、よく忘れてしまうのでまとめてみました。

このまとめはDOM操作の使い方と個人的によく使うDOM操作の覚え書きになっています。
DOM操作がよくわからん！という方は最初から読んで下さい。

# DOMとは
-  DOMとは、Document Object Modelの略で、HTMLやXML文書のためのプログラミングインターフェイスです。

- DOMではHTML、XMLドキュメントをオブジェクトのツリー状の集合として取り扱います。
このツリーをDOMツリーと呼びます。

# DOM操作をする事で何が出来るの？
- 文書構造、スタイル、内容を変更することが出来るので、ユーザーに視覚的なフィードバックを与える事が出来ます。
Javascriptで動的にウィンドウを閉じてみたり、クリックすると色を変えるなど色々出来ます。

# やり方
大きい流れは以下の通りです。

1. ドキュメント内の要素をメソッドで取得する。
2. 取得した要素をプロパティで変更する。


# 実際にやってみよう
だらだら説明を続けてもよくわからないので、実際にDOM操作でh1要素のタイトルを取得して変更する作業をしてみましょう。

## 要素取得とプロパティの変更
まず以下のhtmlを用意します。

```html
<html>
  <head>
    <title>DOMの操作練習</title>
  </head>
  <body>
    <h1 id="title">DOMの操作練習</h1>
  </body>
</html>
```
以下のようにh1のテキストが表示されていますね。

![スクリーンショット 2020-10-05 0.10.30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/343136/5582e4cb-f215-58c2-dcda-eed8ae02e6a7.png)



以下のようにJavaScriptのコードを追加してみます。

```html
<html>
  <head>
    <title>DOMの操作練習</title>
  </head>
  <body>
    <h1 id="title">DOMの操作練習</h1>
  </body>
  <!-- 以下を追加 -->
  <script>
    // 1.DOM操作する対象の選択
    const title = document.getElementById('title');
    // 2.要素の変更
    title.textContent = 'タイトルを変更しました';
  </script>
</html>
```
すると以下のようにh1要素のテキストが変更されます。

![スクリーンショット 2020-10-05 0.09.59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/343136/dd598893-2d05-c4c3-82b9-68a5df951e23.png)

## 一体何が行われたのか？
1.DOM操作する対象の選択
2.要素の変更
について詳しく見ていく事にします。

## 1.DOM操作する対象の選択
まずは、操作したい対象を選択しています。以下のコードを見て下さい。

```js
const element = document.getElementById('title');
```

### Documentオブジェクト
ここで出てくる`document`は、Documentオブジェクトというものです。
Documentオブジェクトは、そのHTMLドキュメント全体を表現するオブジェクトになります。
JavaScriptでDocumentオブジェクトは、documentというグローバル変数でアクセス出来ます。

### 要素の取得
`getElementById('title')`でtitleというIDを持つ要素を取得します。
IDはDOMツリーの中で一意でなければなりません。

## 2.要素の変更
先程取得した要素のテキストを変更します。
textContentというプロパティを使えば、指定した要素のテキスト部分のみを取り出すことができます。

```javascript
element.textContent = "タイトル変更";
```

### 1行でも書けるよ
説明しやすいので2行で書きましたが1行でつなげて書く事も出来ます。

```javascript
document.getElementById('title').textContent = 'タイトルを変更しました';
```


# イベントを使ったDOM操作
実際の業務では、イベントと組み合わせて使う事が多いです。
イベントとは「ボタンが押されたら」とか「送信されたら」といった動作の事です。
例えば以下の例は「取得した要素がクリックされたらlogを出力してね」というコードになります。

```javascript
document.getElementById('title').onclick = function() {
  console.log('ログ出力'); 
}
```

`getElementById`で取得したtitleをクリックするとログ出力する事が出来ました。

![スクリーンショット 2020-10-05 22.56.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/343136/5c124327-663a-9b44-19e8-0b4f52fa4497.png)


# よく使うDOM操作のまとめ(随時更新)
## ドキュメント全体からspan要素だけを取得


```javascript
document.getElementByTagName('span');
```

## ドキュメント全体から全ての要素を取得

```javascript
document.getElementByTagName('*');
```


## 取得した要素のclassを追加

```javascript
document.getElementById(id).classList.add(class);
document.getElementById(id).classList.add(class1, class2);
```

## classを削除

```javascript
document.getElementById(id).classList.remove(class);
```

## classをもっているか判定

```javascript
document.getElementById(id).classList.contains(class);
```

## 指定したクラスをもっていれば消す、もっていなければ追加。

```javascript
document.getElementById(id).classList.toggle(class);
```

## 取得された要素がクリックされたタイミングで起動

```javascript
document.getElementById('title').onclick = function() {
  // 処理内容
}
```