そもそもDOMってなに？HTMLの要素をどう取得するの？

# DOMとは
JavaScriptからHTMLを操作する仕組み。

## DOMツリーとは
HTMLの内容をツリー上に表現したもの。
DOMツリー内の各要素のことをノードと呼ぶ。
https://zenn.dev/miumi/articles/2924832e3b3f940f8

## WebページのHTMLの情報や要素を確認する
https://saruwakakun.com/html-css/basic/chrome-dev-tool

## 要素の取得
## 特定のID名を持つノードを指定する
```html
<body>
    <h1>挨拶</h1>
    <div id="main">
        <p>こんにちは</p>
        <p>さようなら</p>
    </div>
</body>
```
```javascript
const target = document.getElementById('main');
console.log(target);
//こんにちは
//さようなら
```
※documentとは
window.documentというWebブラウザーが標準で用意しているオブジェクトwindowの一部。HTMLを操作するためのもの。windowは省略できる。

### HTMLタグ名でノードを取得する
```html
<body>
    <h1>挨拶</h1>
    <div id="main">
        <p>こんにちは</p>
        <p>さようなら</p>
    </div>
</body>
```
```javascript
const target = document.getElementsByTagName('h1');
console.log(target);
//挨拶
```

※ID指定ではないのでElements部分が複数指定になっている。
getElementsByClassNameも同様。

## 親ノードと子ノード
```html
<body>
    <h1>挨拶</h1>
    <div id="main">
        <p>こんにちは</p>
        <p>さようなら</p>
    </div>
</body>
```
```javascript
const target = document.getElementById('main');
const fitst = target.firstElementChild;
const last = target.lastElementChild;

console.log(first);
//こんにちは
console.log(last)
//さようなら
```

## formの要素の取得

```html
<body>
    <h1>フォーム要素の取得</h1>

    <form id="form1">
        <input type="text" name="text" placeholder="text">
        <inp0ut type="submit" name="formSubmit" value="submit">
    </form>

<form id="form2">
        <input type="text" name="text" placeholder="text">
        <inp0ut type="submit" name="formSubmit" value="submit">
    </form>
```

```javascript
const forms = document.forms;
console.log(forms[0]);
console.log(forms[1]);
```

## セレクターAPI

```javascript
const targets = document.querySelectorAll('#main > p');
//id = mainの要素の直下のpタグの要素全部取得
const target = document.querySelector('#main > p')
//id = mainの要素の直下のpタグの要素を一個だけ取得
```

セレクターAPIはdocument.getElementById()に比べて処理が重く、結果が遅くなる傾向。
できるだけdocument.getElementById()を利用する。

# DOMの操作

## 文字列を変える

```html
<body>
    <h1>挨拶</h1>
    <div id="main">
        <p>こんにちは</p>
        <p>さようなら</p>
    </div>
</body>
```

//pタグの「こんにちは」を「こんばんは」に変えたい場合
```javascript
const target = document.getElementById('main').firstChild;
console.log(target.textContent);
//こんにちは
target.textContent = 'こんばんは';
console.log(target.textContent);
//こんばんは
```

## CSSのプロパティを変更する

```html
<body>
    <h1>挨拶</h1>
    <div id="main">
        <p>こんにちは</p>
        <p>さようなら</p>
    </div>
</body>
```

```javascript
const target = document.getElementById('main'),firstElementChild;

target.style.fondSize = '.5em';
target.style.border = '1px solid';
```

# 要素の削除、追加

## 削除

```html
<body>
    <h1>挨拶</h1>
    <div id="main">
        <p>こんにちは</p>
        <p>さようなら</p>
    </div>
</body>
```

```javascript
const target = document.getElementById('main').firstElementChid;
target.parentNode.removeChild(target);
//ターゲットを指定。ターゲットの親要素がremoveChildしている扱いにする。
```

やっていること:
「削除したい要素」の「親要素」の「子の中」の「削除したい要素」を削除する。

回りくどいがjavaScriptの仕様なので仕方ない。

## 要素の追加

```javascript
//要素の作成
const element = document.createElement('p');
element.textContent = 'これは追加された要素です';

//要素の追加
const target = documen.getElementById('main')
target.appendChild(element);
```

# イベント処理
イベントとは
「何かしらのきっかけ　= イベント」
・ユーザーがあるボタンを押した時にダイアログを表示する
・あるテキストフォームにフォーカスしたタイミングで動かしたい処理があるとする


```html
<body>
    <h1>挨拶</h1>
    <div id="main">
        <p>こんにちは</p>
        <p>さようなら</p>
    </div>
</body>
```

```javascript
const target = document.getElementById('main').firstElementChild;
target.addEventListener('click', () => {
    target.textcontent = 'クリックされました';
});
```

addEventListenerは第一引数にイベント、第二引数にイベントによって実行される処理を書いた関数を指定する

https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener

# イベントの伝播
イベントを伝播させたくない場合、

addEventListenerの第二引数に指定する関数を引数に取り、仮にその引数をe(イベントの頭文字)とするならば
```
e.stopPropagation()
```
という処理を行うことで伝播をストップさせることができる。