Quantcast
Channel: CSSタグが付けられた新着記事 - Qiita
Viewing all articles
Browse latest Browse all 8640

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

$
0
0

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

スクリーンショット 2020-01-08 08.42.38.png
(Chrome拡張機能のHTML Tree Generatorです。めっちゃ便利なので是非)

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

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

  1. Properties (プロパティ)

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

  1. 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が1つなのに対し、classやtagnameは複数形なので配列で戻されます。例えclassが適用されている場所が1つしか無くても、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");

これにてJavaScriptをWEBサイトに適用する方法終了。


Viewing all articles
Browse latest Browse all 8640

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>