DOMとノードってなに？？

## What's　DOM
DOM(Document　Object Model)は、HTML文書などを扱うための手法の1つであり、これを利用することで、HTMLなどの各要素(divタグなど)を簡単に操作することができます。

例えば、文字列”Morning”を文字列"evening"に簡単に置き換えることができます。


### こういうこと(超絶ざっくりな図)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2854030/c1ace5a6-5b27-79f4-6894-c1f9e1cfd816.png)

## DOMツリー ヌー ヤイビーガ？(沖縄方言「DOMツリーは何ですか？」)	
WebページはDocumentオブジェクトによって構成されており、ブラウザがHTMLを解析すると、文書の内容を表すツリー構造が構築され、この構造のことをDOMツリー(ドキュメントツリー)と呼びます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2854030/7ac7c95f-19e0-d165-0d89-7b7dc9d27736.png)


## ノード ノーリャー？(宮古島方言「ノードは何ですか？」)	
DOMツリーを形成する1つ1つのオブジェクトをノード(Node)と呼びます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2854030/8a25d8b1-ce96-03f4-c6b0-876794c2c335.png)

上図のように、ノードとは各要素(Elementやタグと呼ぶ場合もあります)を表します。
特定のノードを起点(今回はsection)とした際に、その上にあるノードを「親ノード」、その下を「子ノード」と呼び、同一階層にあるノードのことを「兄弟ノード」と呼びます。

### 実際に触ってみる

``` html
<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DOMとノード</title>
    <style>
        #section1 {
            background-color: bisque;
        }

        #section2 {
            background-color: skyblue;
        }
    </style>
</head>

<body>
    <section id="section1">
        <h1>セクション　その１</h1>
        <p>子ノード1</p>
        <p>子ノード2</p>
        <p>子ノード3</p>
    </section>
    <section id="section2">
        <h2>セクション　その２</h2>
        <p>子ノード1</p>
        <p>子ノード2</p>
        <p>子ノード3</p>
    </section>
    <script>
    	// ここにJSを書くのです。
    </script>
</body>

</html>
```


*ブラウザで表示すると。*

![2022-10-05_15h05_53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2854030/caac6f40-3739-c8a9-3033-0ef00420817e.png)


## ID名からノードを取得＆操作
ID名を指定するメソッドは以下のように定義されています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2854030/1ad1161f-0311-50d6-3df8-92cb1b9ab0b9.png)

こちらを用いて、section2を取得して、その文字色を赤色に変更してみます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2854030/220f04bf-b6f3-1dee-f0e8-20aa08222032.png)

*ブラウザで表示すると。*
![2022-10-05_15h07_55.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2854030/6f8dce9d-696b-f0f1-2676-d62ed93b04d5.png)

section2及びその配下(子ノード)の文字色が赤色に変わりました！


## 子ノードを取得＆操作
子ノードを指定するメソッドは以下のように定義されています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2854030/05602f38-6a65-895b-56c2-a702c4ae75a4.png)


elementNodeReferenceは起点となるノードを示します。
nodeListは起点となるノードに付随する子ノードすべてを指します。

こちらを用いて、section2を取得して、子ノードのうち2番目の子ノードの文字列を変更してみます。
![2022-10-05_15h10_26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2854030/2420c24d-d22f-0dcf-61f8-3c2ea2be41a9.png)

### ブラウザで表示すると。
![2022-10-05_15h11_56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2854030/24d08cec-7895-41a0-e34e-64fb6cc1ac3e.png)

::: note info
補足：baseElement.childNodes[5];は2番目のノードを取得したいのになぜ「5」???

ChromeブラウザのchildNodesの実装が、ノードとノードの間に「空白のノード」を差し込むものになっているため、意図しない配列の添え字になっているようです。
例えば、Chromeブラウザで1番目のノードを取得したい場合、添え字は「3」になります。
::: 

## 親ノードを取得＆操作
親ノードを指定するメソッドは以下のように定義されています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2854030/30996478-1a58-0877-8949-9b3de02c9057.png)

こちらを用いて、section2の親ノードを取得して、その親ノードの子ノード(section2)を全て削除してみます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2854030/037b442a-f2d1-f932-a043-eabba9a70c09.png)

### ブラウザで表示すると。
![2022-10-05_16h18_22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2854030/c2c91ec6-9a17-b4a8-119e-7e451288aee4.png)

セクション　その２が削除されました！

以上　DOMとノードなに？？でした～。