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


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

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

UdemyのAngelaさんの講座（英語だけどめっちゃわかりやすいです！） → [リンク](https://www.udemy.com/course/the-complete-web-development-bootcamp/?deal_code=JPA8DEAL2PERCENTAGE&aEightID=s00000016735001) 


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

### 1. HTMLタグの中に入れる


```html:qiita.html

<body onload="alert('this is alert');">

<h1>Hello</h1>

</body>


```

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

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


```html:qiita.html

<body>

   <h1>Hello</h1>


   //こちらがJavaScriptスペース

   <script type="text/javascript">

   alert('this is alert');

   </script>

</body>


```

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


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


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


```html:qiita.html

<body>

   <h1>Hello</h1>


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

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

</body>


```

```js: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を適用していくことができます。


<img width="781" alt="スクリーンショット 2020-01-08 08.42.38.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/161691/546d1ffc-e331-38aa-2f33-fee0edc79e5b.png">
（Chrome拡張機能のHTML Tree Generatorです。めっちゃ便利なので是非）

###・DOMを使用して変更できるもの

そして、DOMを使用して変更できるのは大きく2つに分かれます。

1. Properties （プロパティ）

状態を変えるもの。例えば、そのノードの色や文字を変更したり。

2. Methods （メソッド）

何か動作を加えるもの、例えば、何か関数を適用したり。


###・Node（ノード）を指定してJavaScriptを適用する方法

それでは具体的な指定の方法と適用方法です。まず階級構造ですがDocumentの中に、このHTMLファイルがあると考えます。

上記画像のH1を指定したい時はこんな感じです。

```js:qiita.js

document.firstElementChild.lastElementChild.firstElementChild;

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


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

```js: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さんのがすごく綺麗にまとまっていたのでそちらを参考に→[リンク](https://qiita.com/KDE_SPACE/items/e21bb31dd4d9c162c4a6#%E3%83%8E%E3%83%BC%E3%83%89%E3%81%AE%E3%83%97%E3%83%AD%E3%83%91%E3%83%86%E3%82%A3)


###・セレクタで指定してJavaScriptを適用する方法

でも結局よく使うのはセレクタでの指定みたいです。セレクタっていうのはCSSのスタイルシートでよく使う、タグなら h1 とか、クラスなら .class名 とか、IDなら #id名 みたいなやつです。


```js: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の色を赤に変えたいときは

```js:qiita.js

//selectorでh1を選択して、styleの色を"red"に変える。

document.querySelector("h1").style.color = "red";


```

色だけじゃなくて、backgroundColorとか、fontFamilyとか、色々なスタイルを変えることができます。ポイントは、CSSだとbackground-colorだったのが、キャメルケースCamel Lettersになり、backgroundColorになることです。

そのほかにもめっちゃたくさんあるので、詳しくはw3schoolsを参照ください。
[w3schoolリンク](https://www.w3schools.com/jsref/dom_obj_style.asp)


##クラスをJavaScriptで適用したり、外したりする

CSSのスタイルシートに存在するクラスを、JavaScriptを使用して要素に外したり、つけたりすることができます。

例えば、CSSのスタイルシートに"gorilla"というclass名のスタイルがあるとします。

```css:style.css

.gorilla{
   color: brown;
}

```

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

```html:index.html

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

```

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

```js:qiita.js

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


```


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

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

```js:qiita.js

<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サイトに適用する方法終了。