JavaScriptでの機能 #JavaScript

DOM

HTMLを解析し、データを作成します。
HTMLを解析、DOMに変換=>CSS、JSを読み込んで見た目の描画=>ページを閲覧できます。
HTMLは階層構造になっていることが特徴です。例えば親要素、子要素みたいな感じです。
DOMによって解析されたHTMLは、階層構造のあるデータ(DOMツリー)となります。
DOMツリーはデータとして階層構造を扱うためのアルゴリズム(計算方法)を使い操作できます。
JSを使うと、DOMツリーを使うことができます。
HTMLの要素名や、「id、class」といった属性の情報を元にDOMツリーの一部を取得し、CSSを変更したり、要素を増やしたり、消したりできます。
変更したりするとブラウザに反映され、描画も変わります。

ノード

HTML1つ1つのタグが、DOMツリーの中ではノードと呼びます。
例えばタグでbodyがあり階層構造にあるheaderまたその中にあるheader_lightもノードと呼びます。

ノードの取得

JSでHTML要素のid名やクラス名を指定することで、マッチするノードを取得できます。

document.getElementById("id名");

documentは、開いているWebページのDOMツリーが入っているオブジェクトです。.getElementById("id名")はDOMツリーから特定の要素を取得するためのメソッドの1つです。
id名で取得したい時は

XXXX.js

document.getElementById("id名");

document.getElementsByClassName("class名");

classを指定して取得する際は使用します。getElementsと複数形になっています。
class名で取得したい時は

XXXX.js

document.getElementsByClassName("クラス名");

document.querySelector("セレクタ名");

セレクタ名を指定してDOMを取得する場合、querySelectorメソッドを使用します。HTML上から、引数で指定したセレクタに合致するもののうち一番最初に見つかった要素1つを取得します。
セレクタ名を取得したい時は

XXXX.js

document.querySelector("セレクタ名");

イベント

HTMLの要素に対して行われた処理要求のことをいいます。例えば「ユーザーがブラウザ上のボタンをクリックした」「テキストフィールドでキー入力をした」「要素の上にマウスカーソルを乗せた」などがイベントです。
また、イベントを起こすのはユーザーだけでなく、「ドキュメントの読み込みが終わった」などブラウザが発生させるものもあります。
例えばWebサイト上のある箇所にマウスを乗せると、プルダウン(選択肢が下に出てくること)が展開するような挙動があります。

イベント駆動

イベントが発生したら、コードが実行される仕組みです。
イベントを取得するためには、先に取得したノードに対して処理を記述します。

addEventListener

ノードオブジェクトのメソッドです。

XXXX.js

(ノードオブジェクト).addEventListener("イベント名", 関数);

上記の読み込み以降で「ノードオブジェクト」に「イベント」が起きた時、「関数」を実行するようになります。
一つのイベントと一つの関数を紐付ける仕組みのことをイベントリスナと呼びます。
一つのイベントに複数の関数を紐付ける場合は、関数の数だけイベントリスナが存在します。
addEventListenerは、あるノードオブジェクトに対して、イベントリスナを追加するメソッドです。

window.onload

ページの読み込みをします。2つの記述方法があります。

XXXX.js

window.onload = function() { 処理 };

XXXX.js

window.addEventListener('load', function() { 処理 });

「ページの読み込みが終わる」イベントは、windowオブジェクトのloadイベントに対応します。

イベント発火の流れ

DOMツリーからノードを取得する => JavaScriptで処理を書く => イベント発火でHTML側で動かす
簡単に書くと
HTML => DOM要素の取得 => JavaScriptで取得した要素に対して実行したい処理を記述する => HTMLでイベント発火

innerHTML

HTML要素の中身を変更することができる関数です。
【例】

XXXX.js

window.addEventListener("load", function() {
  let btn = document.querySelector("button");
  btn.addEventListener("click", function() {
    console.log("Hello");
  });
　// テキストの要素を取得し、変数で定義
　let btn2 = document.querySelector("#Button2");
　let changeText = document.querySelector("p");
　// ボタン2をクリックしたらテキストが置換される
　btn2.addEventListener("click", function() {
 　 changeText.innerHTML = '変更されました';
　});
});

classList.add

「クラス追加」ボタンが押されたら、cssの背景色が赤のredクラスが追加されるようにclassList.addを利用します。
【例】

XXXX.js

// クラス追加を押したらredクラスが追加される
btn.addEventListener("click", function() {
  changeText.classList.add("red");
  console.log(changeText.classList);  //デバッグ
});

classList.remove

「クラス削除」ボタンが押されたら、cssの背景色が青のblueクラスを削除するのにclassList.removeを利用します。
【例】

XXXX.js

// クラス削除を押したらblueクラスが削除される
btn4.addEventListener("click", function() {
  obj.classList.remove("blue");
});

Array.prototype.slice.call()

引数にとったオブジェクトを配列に変換してくれます。

forEach()

配列に対して使われる繰り返し処理です。

XXXX.js

配列.forEach( コールバック関数 )

indexOf()

配列に対してだけ使い、DOMを引数にとって一致した要素番号を戻します。