[JavaScript]DOM操作の基本～要素取得編

## ▼はじめに
本記事では、JavaScriptのDOM操作において最初の処理である”要素取得”について、これだけ覚えておけば何とかなるであろうメソッドを紹介していきたいと思います。
というのも私自身が要素取得の方法を2種類しか使った事がないため、アウトプットも含めて記事を書かせていただきます。

## ▼目次
[１．getElementById()メソッド](#１getelementbyIdメソッド)
[２．getElementsByClassName()メソッド](#２getelementsbyclassnameメソッド)
[３．getElementsByTagName()メソッド](#３getelementsbytagnameメソッド)
[４．querySelector()メソッド](#４queryselectorメソッド)
[５．querySelectorAll()メソッド](#５queryselectorallメソッド)

## １．getElementById()メソッド
特徴：特定のIDを持つ要素を取得する。


▼取得例
```HTML:HTML
<body>

    <div id="example"></div>
    
</body>
```

```JavaScript:JavaScript
const example = document.getElementById('example');
console.log(example);
```
▼結果
ID”example”の要素を取得できました。

![スクリーンショット 2024-07-15 141937.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3148670/a943a16e-50bb-72f6-0fd7-068e1bfc4f96.png)

## ２．getElementsByClassName()メソッド
特徴：特定のクラス名を持つ全ての要素を取得する。

▼取得例

```HTML:HTML
<body>

    <div class="example"></div>
    <p class="example"></p>
    
</body>
```
```JavaScript:JavaScript
const example = document.getElementsByClassName('example');
console.log(example);
```

▼結果
クラス”example”の要素を全て取得できました。

![スクリーンショット 2024-07-15 143405.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3148670/c193d55f-ada0-30cb-66f7-968a824ec447.png)

:::note alert
注意！！
getElementsByClassName()メソッドで取得した要素は、HTMLCollectionという配列風の値で返ってきます。
要素に対して処理を行う場合、繰り返し処理をする必要があります。
:::

### ▼応用：特定のクラス名（複数）の中から指定の要素を取得する
クラス名"example"のh3タグの要素を取得します。
```HTML:HTML
<body>

    <h1 class="example">example1</h1>
    <h2 class="example">example2</h2>
    <h3 class="example">example3</h3>
    
</body>
```
```JavaScript:JavaScript
const example = document.getElementsByClassName('example')[2];
console.log(example);
```

▼結果
h3タグを取得できました。

![スクリーンショット 2024-07-15 152922.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3148670/6211cf45-ec41-7599-f78e-7dcf1a04a545.png)


▼解説
``getElementsByClassName('example')``の返り値はHTMLCollectionになります。
HTMLCollectionにはインデックスが振られているため、``getElementsByClassName('example')[2]``と指定した事で、3個目の要素が取得できました。
気づいている人もいると思いますが、指定して取得した要素はHTMLCollectionではありません。そのまま使う事ができます。

## ３．getElementsByTagName()メソッド
特徴：特定のタグ名を持つ全ての要素を取得する。


▼取得例
```HTML:HTML
<body>

    <h1>example1</h1>
    <h2>example2</h2>
    
    <h1>example3</h1>
    <h2>example4</h2>
    
</body>
```

```JavaScript:JavaScript
const example = document.getElementsByTagName('h1');
console.log(example);
```

▼結果
h1タグを全て取得できました。
getElementsByClassName()メソッド同様に返り値はHTMLCollectionになります。
![スクリーンショット 2024-07-15 145645.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3148670/b8bdd9e4-b019-ac21-9a1e-42039770dba2.png)


## ４．querySelector()メソッド
特徴：指定したCSSセレクター又はCSSセレクター群にマッチする最初の要素を取得する。

▼CSSセレクターとは
>セレクターは、 CSS でも JavaScript でも、 HTML 要素の型、属性、現在の状態、さらには DOM 内の位置に基づいてターゲットを絞ることができます。
引用：MDN

▼取得例
それでは``querySelector()メソッド``を使って要素を取得していきます。
もちろんclassやidを指定して取得することもできますが、``querySelector()メソッド``ならではの指定方法で取得していきたいと思います。

**▼複雑な指定＆属性セレクター**
```HTML:HTML
<body>

    <div class="div-area1">
        <button class="button" name="button1">ボタン１</button>
    </div>

    <div class="div-area1">
        <button class="button" name="button1">ボタン２</button>
    </div>

    <div class="div-area2">
        <button class="button" name="button2">ボタン３</button>
    </div>
    
</body>
```

```JavaScript:JavaScript
const example = document.querySelector("div.div-area1 button[name='button1']");
console.log(example);
```
▼結果
今回は、``div``タグ＆クラス名``div-area1``＆name属性``button1``を指定して要素を検索しています。
結果として、条件に一致する最初の要素を取得することができました。

![スクリーンショット 2024-07-15 171748.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3148670/2e527820-93bc-592e-df36-31396a1bcbf0.png)

<a id="anchor5"></a>
## ５．querySelectorAll()メソッド
特徴：指定したCSSセレクターにマッチする全ての要素を取得する。

▼取得例
```HTML:HTML
<body>

    <button class="button1">ボタン１</button>
    <button class="button2">ボタン２</button>
    <button class="button3">ボタン３</button>
    
</body>
```

```JavaScript:JavaScript
const example = document.querySelectorAll("button");
console.log(example);
```

▼結果
``button``タグを全て取得できました。
ここで分かるのが、返り値は**NodeList**という配列風になっています。
![スクリーンショット 2024-07-15 180610.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3148670/c26af6ac-72be-9422-849a-498ad6744dba.png)

**▼複数条件の場合**
次に複数条件で要素を取得してみます。

```HTML:HTML
<body>

    <button class="button1">ボタン１</button>
    <button class="button2">ボタン２</button>
    <button class="button3">ボタン３</button>
    
</body>
```

```JavaScript:JavaScript
const example = document.querySelectorAll("button.button1,button.button2");
console.log(example);
```

▼結果
今回は``button``タグ＆クラス名``button1``もしくは``button``タグ＆クラス名``button2``に一致する要素を検索しています。
結果として、一致する要素を全て取得できています。

![スクリーンショット 2024-07-15 182247.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3148670/13f78d2b-328a-26d8-ac0a-79b25956914e.png)

:::note info
Point！
NodeListには**foreachメソッド**を使ってアクセスできます。HTMLCollectionと違い、配列に変換する必要はありません。
注意点として、静的NodeListはDOM構造が変化しても更新されません。静的NodeListを操作する場合はDOM構造が変化するかを考慮して記述する必要があります。
:::

## まとめ
<table>
  <caption>要素の取得方法</caption>
  <thead>
    <tr>
      <th>名前</th> <th>説明</th>
    </tr>
  </thead>
  <tr>
    <td> getElementById() </td> <td>特定のidを持つ要素を取得</td>
  </tr>
  <tr>
    <td> getElementsByClassName() </td> <td>特定のクラス名を持つ全ての要素を取得</td>
  </tr>
  <tr>
    <td> getElementsByTagName() </td> <td>特定のタグ名を持つ全ての要素を取得</td>
  </tr>
  <tr>
    <td> querySelector() </td> <td>指定したCSSセレクター又はCSSセレクター群にマッチする最初の要素を取得</td>
  </tr>
  <tr>
    <td> querySelectorAll() </td> <td>指定したCSSセレクターにマッチする全ての要素を取得</td>
  </tr>
</table>

様々な方法で要素を取得する事ができましたね。実際は要素をどう操作するかで取得方法が変わってきますが、これらの方法を覚えておく事で出来ることはかなり広がります。
皆さんも実際に手を動かして是非チャレンジしてみてください！！