さぁJavaScript自体はなんとなく理解できたぞ、ってなってもそれを実用できないと意味がないですよね。
ターミナルでわちゃわちゃやってるだけでも楽しいけど、やっぱりWEBサイトに適用させた方がもっと面白いはずです。今回は、HTMLファイルにJavaScriptを適用する方法をメモしていきます。
HTMLファイルにJavaScriptを適用する方法
1. HTMLタグの中に入れる
<bodyonload="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タグ内の属性を変更する方法です。
<ahref="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サイトに適用する方法終了。