Javascriptがわからなかったので「DOM」を調べました。

# はじめに
こんにちは！
ガク@Necono_Engineerと申します！
プログラミングスクールRUNTEQで現在Ruby on Railsを中心に学んでいます。今回はjavascriptやReactを学ぶ中で出会った`DOM`という概念についてまとめてみました！
![1.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3364974/2cc265b4-8fe3-f786-404d-d5795bd19a33.jpeg)
("ドム"と読みます)

# 概要
この度、PF作成のために`React`を学び始めたところ`仮想DOM`という言葉を知りました。

仮想....
というかまず、"**DOM**"ってなんなんだ？

そんな疑問を解消するためにJavaScript初心者がゼロから少しずつ学んだことを共有していきたいと思います。

:::note warn
プログラミング初学者のため、内容に誤りがある可能性がございます。
もし間違いがあればご指摘いただけると幸いです。
:::
                         
# DOMとは?
**DOM**（ Document Object Model ）はWeb API( Application Programming Interface )の1つです。
API（ Application Programming Interface ）は、`Interface(接合部)`つまり、ApplicationとProgrammingを繋ぐ橋渡し役のことを言います。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3364974/71b45770-7333-f1ae-b625-973854b37fff.png)
ということは...
DOMも何かと何かを繋いでいるのでしょうか？

そうです！DOMは`HTML`、`XML`、`CSS`などの「マークアップ言語」を「スクリプト言語」である`Javascript`と繋いでいます!

### マークアップ言語

マークアップ言語では文章の意味を「タグ」と呼ばれる要素で記述し、装飾(マークアップ)を行います。(divタグ・pタグなど)

### スクリプト言語
アプリケーションソフトウェアを作成するための簡易的なプログラミング言語のことを指します。以下のようなものがスクリプト言語に当たります。
- PHP
- Ruby
- Python
- Java
- `JavaScript`

![4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3364974/509bd4d1-c85c-56bb-0c18-b9b4fa83a428.png)
WebブラウザはDOMで構成されています。
HTMLドキュメントを読み込むと、各構成要素をそれぞれDOM化して画面表示を行います。
![1.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3364974/6ecd3397-dd87-b91a-00f7-11757807d5ec.jpeg)
以下のHTMLコードを見てください ↓
```
<!DOCTYPE html>
<html>
<head>
    <title>My document</title>
</head>
<body>
    <div>
        <h1>Header</h1>
        <p>Paragraph</p>
    </div>
</body>
</html>
```
上記HTMLはブラウザでは以下のDOMに変換されます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3364974/e29d016d-5f2e-f0a6-4809-2da346621df7.png)
DOM( Document Object Model)という名前の通り`ドキュメント`を`オブジェクト化`したものです。`オブジェクト`の各要素はノード（節）と呼ばれ、階層的な構造を成します。

DOMの階層構造はツリー(木)に似ているため"DOMツリー"と呼ばれます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3364974/d85f9a57-be9c-3bc8-0b87-7fd4eff035af.png)

- **`<Document>`**「根本」Webページ全体を表すオブジェクトです。
- **`<html>`タグ**「幹」🌲: この木の「幹」は、`<html>`タグです。全てのHTMLページには<html>タグが存在しています。ここがルートになり、他の要素が展開されます。
  
- **`<head>・<body>`タグ🪵**: HTMLの重要な部分、例えば`<head>`や`<body>`タグは大きな「枝」として考えられます。これらは`<html>タグ`に直接つながり、🍃であるp,aタグの出発点になります。🪵

- **`<h1>・<p>タグ`**🍃: HTMLの細かな要素、例えば`<p>`（段落）、`<a>`（リンク）、など、ユーザーの目に触れる部分を形作ります。🍃



`オブジェクト化`することで本来は操作できないはずのマークアップ言語をプログラミング言語(Javascript)で操作することが可能になります。
# 具体的なコード( getElementById )について

Javascriptでよく見る → `getElementById`という書き方。
**Get Element By Id**
日本語に直すと`idの要素を取得`という意味になります。
例えば、Javascriptのコードで以下のようなものがあります。
```
const button = document.getElementById('the-button');
```
この`document`とは
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3364974/e29d016d-5f2e-f0a6-4809-2da346621df7.png)
DOMにおいて全体の根本であるDocumentにあたります
つまり、全体の始まりである`document`から派生した要素の中で`id`が`the-button`の値のものを取得するという意味のコードになります。

```
<!DOCTYPE html>
<html>
<head>
    <title>Button Example</title>
</head>
<body>
    <button id="the-button">Click Me</button>
    <script>
        const button = document.getElementById('the-button');
        // ここで button に対する操作を追加できます
    </script>
</body>
</html>
```
上記HTMLは以下のDOMを構築します。
```
Document
│
├─ Head
│   └─ Title: "Button Example"
│
└─ Body
    │
    ├─ Button: id="the-button"
    │
    └─ Script
        └─ JavaScriptコード
```
```
const button = document.getElementById('the-button');

// ボタンがクリックされたときに実行される関数
button.addEventListener('click', function() {
    alert('クリック!クリック！');
});
```
そして、button関数を使用し、イベントリスナー(addEventListener)を追加することで指定した要素(今回はid="the-button")に動的な機能を実装することができるようになります！

このようにDOMを理解することでJavascriptのコードが"何を実行しようとしているのか？"、"何を指定しているのか？"がよりわかりやすくなります。


# まとめ
DOMの勉強をすることで苦手だったJavascriptへ少しだけ近づけたような気がします。これからも学習を進めJavascriptやWebの基礎知識を深めていこうと思えました。
# 参考文献
https://zenn.dev/antez/articles/b6eb22cb228a49

https://eng-entrance.com/what-is-dom#ID

https://zenn.dev/nameless_sn/articles/javascript_dom_tutorial

https://udemy.benesse.co.jp/development/dom.html

https://developer.mozilla.org/ja/docs/Web/API/Document_Object_Model/Introduction