JavaScriptをWEBサイト（HTMLファイル）に適用する方法

さぁJavaScript自体はなんとなく理解できたぞ、ってなってもそれを実用できないと意味がないですよね。

ターミナルでわちゃわちゃやってるだけでも楽しいけど、やっぱりWEBサイトに適用させた方がもっと面白いはずです。今回は、HTMLファイルにJavaScriptを適用する方法をメモしていきます。

HTMLファイルにJavaScriptを適用する方法

1. HTMLタグの中に入れる

qiita.html

<bodyonload="alert('this is alert');"><h1>Hello</h1></body>

この場合は、Bodyがロードされた時にalertが実行されます。CSSもこんな感じでタグに直接適用することができますけど、あんまりやらないですよね。

2. HTMLファイルの中にJavaScriptスペースを作る

qiita.html

<body><h1>Hello</h1>


   //こちらがJavaScriptスペース

   <script type="text/javascript">alert('this is alert');</script></body>

同じくCSSでも同じようにできますけど、こちらもあんまりやらないやつ。

3. 外部JavaScriptファイルを使用して適用する

こちらが本命。CSSのように外部シートを作成して、そちらにJavaScriptを記述していくタイプになります。

qiita.html

<body><h1>Hello</h1>


   //こちらが外部JavaScriptシート（index.js）の参照

   <script src="index.js"charset="utf-8"></script></body>

index.js

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を指定したい時はこんな感じです。

qiita.js

document.firstElementChild.lastElementChild.firstElementChild;

Documentの中の最初の子ノード（HTML）の中の最後の子ノード（BODY）の中の最初の子ノード（H1）が指定されています。

指定するの結構めんどくさいですよね。
でも大丈夫。ちゃんとid名やclass名で指定できるものがあります。

qiita.js

//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名みたいなやつです。

qiita.js

//タグを選択する場合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の色を赤に変えたいときは

qiita.js

//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名のスタイルがあるとします。

style.css

.gorilla{color:brown;}

このクラス"gorilla"を h1タグに適用したり、しなかったりする方法。説明下手か。

index.html

<h1> Gorilla is the strongest animal in the world. </h1>

index.js

// 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タグのテキストを変えたい場合とかありますよね。あるかな笑
そんな時は、、、

qiita.js

//取得して変更document.querySelector("h1").textContent="changed H1 text";document.querySelector("h1").innerHTML="changed H1 text";

HTMLの属性をJavaScriptを使用して変更・追加

最後にHTMLタグ内の属性を変更する方法です。

qiita.js

<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");