さぁJavaScript自体はなんとなく理解できたぞ、ってなってもそれを実用できないと意味がないですよね。
ターミナルでわちゃわちゃやってるだけでも楽しいけど、やっぱりWEBサイトに適用させた方がもっと面白いはずです。今回は、HTMLファイルにJavaScriptを適用する方法をメモしていきます。
UdemyのAngelaさんの講座（英語だけどめっちゃわかりやすいです！） → リンク
##HTMLファイルにJavaScriptを適用する方法
1. HTMLタグの中に入れる
<body onload="alert('this is alert');">
<h1>Hello</h1>
</body>
この場合は、Bodyがロードされた時にalertが実行されます。CSSもこんな感じでタグに直接適用することができますけど、あんまりやらないですよね。
2. HTMLファイルの中にJavaScriptスペースを作る
<body>
<h1>Hello</h1>
//こちらがJavaScriptスペース
<script type="text/javascript">
alert('this is alert');
</script>
</body>
同じくCSSでも同じようにできますけど、こちらもあんまりやらないやつ。
3. 外部JavaScriptファイルを使用して適用する
こちらが本命。CSSのように外部シートを作成して、そちらにJavaScriptを記述していくタイプになります。
<body>
<h1>Hello</h1>
//こちらが外部JavaScriptシート（index.js）の参照
<script src="index.js" charset="utf-8"></script>
</body>
alert('this is alert');
ちなみに、ポイントとしてCSSへのlinkはHTMLファイルの最初に記述するのに対し、JavaScriptファイルへの参照はBodyタグの一番最後に記述します。
（理由として、HTMLファイルは上から順に読み込まれていくので、特定のclass,idを指定するJavaScriptのファイルが上にあるとそもそもタグを参照できないからです。例えば、h1に適用するJavaScriptのプログラムを書いたとすると、そもそもh1が読み込まれていないと適用できないんですね。）
そして、これで 1,2,3 ともに全て同じ処理をすることができました。
DOM（Document Object Model） とは
簡単にいうと、HTMLをJavaScriptで操作する仕組みのことです。HTMLファイルは下記のようなツリー構造（階級構造）になっていると考え、その要素（Node ノード）を指定してJavaScriptを適用していくことができます。
（Chrome拡張機能のHTML Tree Generatorです。めっちゃ便利なので是非）
###・DOMを使用して変更できるもの
そして、DOMを使用して変更できるのは大きく2つに分かれます。
- Properties （プロパティ）
状態を変えるもの。例えば、そのノードの色や文字を変更したり。
- Methods （メソッド）
何か動作を加えるもの、例えば、何か関数を適用したり。
###・Node（ノード）を指定してJavaScriptを適用する方法
それでは具体的な指定の方法と適用方法です。まず階級構造ですがDocumentの中に、このHTMLファイルがあると考えます。
上記画像のH1を指定したい時はこんな感じです。
document.firstElementChild.lastElementChild.firstElementChild;
Documentの中の最初の子ノード（HTML）の中の最後の子ノード（BODY）の中の最初の子ノード（H1）が指定されています。
指定するの結構めんどくさいですよね。
でも大丈夫。ちゃんとid名やclass名で指定できるものがあります。
//id名で指定
document.getElementById("idName");
//class名で指定
document.getElementsByClassName("className");
//タグの名前で指定
document.getElementsByTagName("h1");
//h1複数ある場合は配列に格納されているので、何個あるか確認
document.getElementsByTagName("h1").length;
//その配列の2個目の色をREDに変えたい場合
document.getElementsByTagName("h1")[1].style.color = "red";
注意！！ 詳しく見てみると getElementとgetElementsで複数形になっています。idが１つなのに対し、classやtagnameは複数形なので配列で戻されます。例えclassが適用されている場所が１つしか無くても、Elementsなので配列で返されるのです。
もっと詳しく見たい人は、KDEさんのがすごく綺麗にまとまっていたのでそちらを参考に→リンク
###・セレクタで指定してJavaScriptを適用する方法
でも結局よく使うのはセレクタでの指定みたいです。セレクタっていうのはCSSのスタイルシートでよく使う、タグなら h1 とか、クラスなら .class名 とか、IDなら #id名 みたいなやつです。
//タグを選択する場合
document.querySelector("h1");
//IDを選択する場合
document.querySelector("#idName");
//クラスを選択する場合
document.querySelector("className");
//リストの中のaリンクのみを選択する場合（階級構造）
document.querySelector("li a");
//nameというクラス名を持つ リストを選択する場合
document.querySelector("li.name");
// id名"List"の中にあるクラス"item"の要素を全て抽出
document.querySelectorAll("#list .item");
この辺を使えばだいたい対応できるんじゃないかな。
##DOMを使用してJavaScriptでCSSを操作する
JavaScriptを使用して、要素のCSSを変更することができます。
例えば、h1の色を赤に変えたいときは
//selectorでh1を選択して、styleの色を"red"に変える。
document.querySelector("h1").style.color = "red";
色だけじゃなくて、backgroundColorとか、fontFamilyとか、色々なスタイルを変えることができます。ポイントは、CSSだとbackground-colorだったのが、キャメルケースCamel Lettersになり、backgroundColorになることです。
そのほかにもめっちゃたくさんあるので、詳しくはw3schoolsを参照ください。
w3schoolリンク
##クラスをJavaScriptで適用したり、外したりする
CSSのスタイルシートに存在するクラスを、JavaScriptを使用して要素に外したり、つけたりすることができます。
例えば、CSSのスタイルシートに"gorilla"というclass名のスタイルがあるとします。
.gorilla{
color: brown;
}
このクラス"gorilla"を h1タグに適用したり、しなかったりする方法。説明下手か。
<h1> Gorilla is the strongest animal in the world. </h1>
// Goriilaのノードを選択し、クラス gorilla を適用
document.querySelector("h1").classList.add("gorilla");
// すでに適用されているクラス"gorilla"を外す
document.querySelector("h1").classList.remove("gorilla");
// "gorilla"クラスがすでに適用されていれば外して、適用されていなければ適用する
document.querySelector("h1").classList.toggle("gorilla");
適用して外すってそういうことね！ってなってくれたら嬉しいです。
HTMLのテキストをJavaScriptを使用して変更
h1タグのテキストを変えたい場合とかありますよね。あるかな笑
そんな時は、、、
//取得して変更
document.querySelector("h1").textContent = "changed H1 text";
document.querySelector("h1").innerHTML = "changed H1 text";
HTMLの属性をJavaScriptを使用して変更・追加
最後にHTMLタグ内の属性を変更する方法です。
<a href="htps://www.google.com">グーグル</a>
//上記のaタグがどのような属性を持っているかを求める
document.querySelector("a").attributes;
//aタグの特定の属性hrefを求める
document.querySelector("a").getAttribute("href");
//→ この場合、"htps://www.google.com"が求められます。
//最後にこのaタグのhref部分を置換します
document.querySelector("a").setAttribute("href", "https://www.kibinag0.com");
これにてJavaScriptをWEBサイトに適用する方法終了。