ランダムに文字を表示させよう～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をつなげる「DOM」を活用しました。

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

• 結果

おみくじ
の
結果

違いを分かりやすくすると

• innerHTML

おみくじ<br>の<br>結果

• textContent

おみくじの結果

• innerText

おみくじ
の
結果

innerHTMLはそのまま、textContentはテキストだけ、innerTextは改行が反映されていることがわかります。

まとめ

• ランダムで文字を表示したい（HTMLとJavaScriptを紐づけたい）場合はDOMを使う
• Document.writeのやり方は推奨されない
• DOMは取得と操作がある

最後に

ここではランダムに文字を表示される方法について自分が行った非推奨方法と推奨方法についてそして推奨方法で使ったDOMについて簡単に説明しました。
今回自分が行ったやり方よりも良いものがありましたらアドバイスしていただきたいです！！
最後までご覧いただきありがとうございました。