JavaScriptにおける基本的なDOM操作まとめメモ（追加予定）

JavaScriptのDOM操作について学習の過程で出てきた基礎的な事項をまとめました
何か間違いなどあればご指摘いただければ幸いです

## イベントとイベントハンドラ
**イベント**とはユーザがブラウザ上で行う様々な動作のことです
マウスのクリックや、ポインタの挙動などあらゆる動作のことを指します
**イベントハンドラ**とはイベントの発生をキッカケとして、何らかの処理を実行することです

### プロパティを使ったイベントとイベントハンドラの関連付け
```javascript:JavaScript
// イベントの発生を検知したい要素を指定します（getElementByIdは後ほど説明します）
const event = document.getElementById('イベントを検知したい要素のid属性値');

// 指定した要素がクリックされたときに任意の動作を行う
event.onclick = () => {
    // 行いたい処理を記述する
}
```
`onclick`によってクリックイベントとイベントハンドラを関連づけることができます
イベントの種類は任意で変更できます

### addEventListenerを使ったイベントとイベントハンドラの関連付け
```javascript:JavaScript
// イベントの発生を検知したい要素を指定します
const event = document.getElementById('イベントを検知したい要素のid属性値');

// 指定した要素がクリックされたときに任意の動作を行う
event.addEventLintener('click', () => {
    // 行いたい処理を記述する
}, false);
```
`addEventListener`の第一引数にイベントの種類を記述し、アロー関数内にイベントハンドラを記述します
この場合ではクリックイベントのときの処理を記述します
第三引数の`false`は**イベントの伝播形式**を指定しています
イベントの伝播形式については、以下の**いりこ氏**(@irico)の記事で説明されています
執筆時点で最終更新日から3年以上経過していますが非常に分かりやすい記事となっています

https://qiita.com/irico/items/8a23071719aa28e3c032

## getElementByIdメソッド
指定したid属性値を持つ要素を1つ取得します
指定したid属性値を持つ要素が無ければ`null`を返します
```javascript:JavaScript
const text = document.getElementById('取得したいid属性値');
console.log(text);
console.log(text.innerText);
```
`text`にはHTMLのタグを含めた要素が格納されます
`innerText`を使えば要素内のテキストのみを出力できます

## getElementsByTagNameメソッド
指定したタグ名を持つ要素を取得します
同一タグは複数ある可能性があるので`Elements`と複数形になっていることに注意しましょう
```javascript:JavaScript
const elements = document.getElementsByTagName('取得したい要素名');

// 繰り返し処理でelements内の要素を一つずつ出力する
for(let i = 0; i < elements.length; i++) {
    console.log(elements[i].innerText);
}
```
`elements`内には配列に似た構造で要素が格納されます

## getElementsByNameメソッド
指定した`name`属性値を持つ要素を取得します
```javascript:JavaScript
const elements = document.getElementsByName('取得したいname属性値');

// elements内の要素を出力する
console.log(elements[0].value);
```
`elements`内には配列に似た構造で要素が格納されます
今回は一つしかない仮定のため、`0`を指定して出力します
`value`メソッドは指定された要素のみを取得します

## getElementsByClassNameメソッド
指定した`class`属性値をもつ要素を取得します
```javascript:JavaScript
const elements = document.getElementsByClassName('取得したいclass属性値');

// 繰り返し処理でelements内の要素を一つずつ出力する
for(let i = 0; i < elements.length; i++) {
    console.log(elements[i]).innerText);
}
```
`elements`内には配列に似た構造で要素が格納されます

## ノード
まずDOMではHTMLをツリー構造として扱います
`<html>`タグ内に`<head>`タグと`<body>`タグがぶら下がっています
更に`<body>`タグには`<header>`タグ、`<main>`タグ、`<footer>`タグがあります
その中にも`<h1>`タグから`<h6>`タグ、`<p>`タグや`<img>`タグ、`<div>`タグなどがあります
```html:HTML
<body>
    <div id='contents'>
        <h1>見出し1</h1>
        <p>テキストテキストテキスト</p>
    </div>
</body>
```
`<div>`タグから見れば`<body>`タグは**親ノード**と呼びます
`<div>`タグから見れば`<h1>`タグと`<p>`タグは**子ノード**と呼びます
`<h1>`タグから見れば`<p>`タグは**兄弟ノード**と呼びます

HTMLの要素を表すもの（タグのこと）を**要素ノード**と呼びます
要素ノード内のテキストは**テキストノード**と呼びます
`<div>`タグ内にあるような属性は**属性ノード**と呼びます

以下にDOM操作を使った**ノードの追加方法**と**置換方法**、**削除方法**をまとめます

### ノードの追加
```javascript:JavaScript
// 新たに追加したいノードの要素名を指定する
const element = document.createElement('追加したい要素名');

// 新たに追加したいノードのテキストを指定する
const text = document.createTextNode('追加したいテキスト');

// テキストノードを新規作成したノードに加える
element.appendChild(text);

// 新規作成したノードをどのノード内に追加するか指定する
const parentElement = document.getElementById('子要素を追加したい要素のid属性値');
parentElement.appendChild(element);
```
この場合には指定した`id`属性値を持つノード内の子ノードの一番最後に追加されます
追加されるノードは`createElement`メソッドで任意の要素名を与えられており、
`createTextNode`メソッドで任意のテキストノードを持っています
`appendChild`メソッドは指定したノードに第一引数を子ノードとして追加します

### ノードの置換
```javascript:JavaScript
// 置き換えたいノードの要素名を指定する
const newElement = document.createElement(`置き換えたいノードの要素名`);

// 置き換えたいノードの属性名と属性値を指定する
newElement.setAttribute('置き換えたいノードの属性名', '置き換えたいノードの属性値');

// 置き換えたいノードのテキストを指定する
const newText = document.createTextNode('置き換えたいテキスト');

// テキストノードを置き換えたいノードに加える
newElement.appendChild(newText);

// 置き換えられるノードを指定する
const oldElement = document.getElementById('置き換えられる要素のid属性値');

// 置換が発生するノードの親ノードを指定する
const parentElement = oldElement.parentNode;

// 置き換えたいノードと置き換えられるノードを指定する
parentElement.replaceChild(newElement, oldElement);
```
この場合は指定した`id`属性を持つノードが新たなノードに置き換えられます
新たなノードは`setAttribute`メソッドによって任意の属性名と属性値が定められています
`replaceChild`メソッドは指定したノードの第二引数で指定した子ノードを、第一引数で指定した子ノードに置換します

### ノードの削除
```javascript:JavaScript
// 削除したいノードの親ノードを指定する
const parentElement = document.getElementById(`削除したいノードの親ノードのid属性値`);

// 削除したいノードの要素名を指定する（複数指定される）
const elements = parentElement.getElementByTagName(`削除したいノードの要素名`);

// 配列の一番最後にあるノードを指定する
const removeIndex = elements.length - 1;

// 削除したいノードを指定する
parentElement.removeChild(elements[removeIndex]);
```
この場合は指定した`id`要素を持つノードの子ノードの中でも、一番最後のものが削除されます
削除したいノードの要素名を指定したときにノードの配列として返されます
`length`は配列数を返しますが配列は`0`から数えられるため、`1`を引いて指定されるノードを一番最後のノードにします
`removeChild`メソッドは引数に削除したいノードを持ち、当該箇所を削除します