ランダムに文字を表示させよう～DOM～

# 初めに
ここではHTMLにJavaScriptを使ってランダムに文字を表示させる方法について説明します。
JavaScriptからHTMLに反映させるために自分が行っていた非推奨な例と推奨される例について紹介します。
# 非推奨方法
* **HTML**
```
<script>
let omikuji = Math.floor(Math.random() * 5);
if(omikuji == 0){
    document.write("大吉")
}
else if(omikuji == 1){
    document.write("中吉")
}
else if(omikuji == 2){
    document.write("吉")
}
else if(omikuji == 3){
    document.write("末吉")
}
else if(omikuji == 4){
    document.write("凶")
}
```

こちらは私が初めに行ったコードです。
一見HTML上で行えて便利かと思いますがこちらは非推奨とされています。
ブラウザーのレンダリングに悪影響が出たり、DOMへの影響などを考慮し非推奨とされているそうです。

# 推奨方法
* **HTML**
```
<p>おみくじの結果</p>
```
* **JavaScript**
```
const result = document.querySelector("p")
const omikuji =["大吉","中吉","吉","末吉","凶"]
const number = Math.floor(Math.random() * omikuji.length);
result.textContent = omikuji[number]
```
こちらは私が改良したコードです。HTMLとJavaScripをつなげる<b>「DOM」</b>を活用しました。

## DOMとは
そもそもDOMとは一体何かを説明します。
DOMはWEBページ（HTML）とJavsScriptを接続するような役割を持っています。
HTML上の「要素」を取得して「操作」を行います
## 取得
HTML上の要素を取得します。
今回JavaScriptの方で１番目に行った const result = document.querySelector("p") が該当します。
取得の仕方にも種類があるのでいくつか紹介します。
### getElementById
HTML上で設定したIDの要素を取得します
* **HTML**

```
<p id = "sampleID">おみくじの結果</p>
```
※「id = "sampleID"」を設定しました
* **JavaScript**

```
const result = document.getElementById("sampleID")
```


### getelementsByTagname
HTML上の要素を取得します

* **HTML**

```
<p>おみくじの結果</p>
```
* **JavaScript**

```
const result = document.getElementsByTagName("p")
```


### getElementsByClassName
HTML上で設定したclassの要素を取得します
* **HTML**

```
<p class = "sampleclass">おみくじの結果</p>
```
※「class = "sampleclass"」を設定しました
* **JavaScript**

```
const result = document.getElementsByClassName("sampleclass")
```

### querySelector
対象となる要素の一番最初のものを取得する

* **HTML**

```
<p id = "sampleID">おみくじの結果</p>
<p class = "sampleclass">今日の天気</p>
<p class = "sampleclass">明日の天気</p>
```
※別の要素を追加しました
* **JavaScript**

```
const result = document.querySelector("p")　　　　　　 →　　「おみくじの結果」を取得
const hako = document.querySelector("sampleclass")　  →　　「今日の天気」を取得
```


### querySelectorAll
対象となる要素すべてを取得する


* **HTML**

```
<p id = "sampleID">おみくじの結果</p>
<p class = "sampleclass">今日の天気</p>
<p class = "sampleclass">明日の天気</p>
```
* **JavaScript**

```
const resulr = document.querySelectorAll　　→　　すべて取得
```


## 操作
先ほど取得した要素のデザインの変更したりテキストの変更したりできます。
今回は一番下の result.textContent = omikuji[number] が該当します。

### innerHTML
要素に含まれるすべてのテキスト（`<br>`等を含む）
* **HTML**
```
<p>おみくじ<br>の<br>結果</p>
```
※改行の `<br>` を追加しました
* **JavaScript**
```
document.querySelector("p").innerHTML
```
* **結果**
``` 
おみくじ<br>の<br>結果
```
### textContent
すべての要素テキスト（`<br>`等を含まない）
* **HTML**
```
<p>おみくじ<br>の<br>結果</p>
```
* **JavaScript**
```
document.querySelector("p").textContent
```
* **結果**
``` 
おみくじの結果
```
### innerText
表示されてるすべての要素のテキスト（`<br>`等反映される）
* **HTML**
```
<h1>あいうえお<br>かきくけこ<br>さしすせそ</h1>
```
* **JavaScript**
```
document.querySelector("p").innerText
```
* **結果**
``` 
おみくじ
の
結果
```

<details><summary> <b>違いを分かりやすくすると</b></summary>

* **innerHTML**
```
おみくじ<br>の<br>結果
```
* **textContent**
```
おみくじの結果
```
* **innerText**
```
おみくじ
の
結果
```
innerHTMLはそのまま、textContentはテキストだけ、innerTextは改行が反映されていることがわかります。
</details>

# まとめ
* ランダムで文字を表示したい（HTMLとJavaScriptを紐づけたい）場合はDOMを使う
* Document.writeのやり方は推奨されない
* DOMは取得と操作がある
# 最後に
ここではランダムに文字を表示される方法について自分が行った非推奨方法と推奨方法についてそして推奨方法で使ったDOMについて簡単に説明しました。
今回自分が行ったやり方よりも良いものがありましたらアドバイスしていただきたいです！！
最後までご覧いただきありがとうございました。