いよいよ、html/cssとの連携
HTML上のボタンをjavascript上で扱えるようにする。
###DOM
DOMとはDocument Object Model(ドキュメントオブジェクトモデル)の略
HTMLは階層構造になっている。これを、DOMツリーとしてjavascriptが取得して自由に操作する。
DOMツリーの一つ一つのタグをノードと呼ぶ。javascriptでは、CSSと同じくid名やクラス名でノードを取得する。
ID名でノード取得 document.getElementById("id名");
クラス名でノード取得 document.getElementsByClassName("class名");
// ID名で取得と比較して、複数定義されるクラスは全ての定義済みクラスを取得するので
// getElement「s」になっていることに注意しておく。
セレクタ名でノード取得 document.querySelector("セレクタ名");
// 合致する最初のノードをセレクタを取得(万能のメソッド？)
// 各種イベントの取得 イベントリスナ
(ノードオブジェクト).addEventListener("イベント名", 関数);
// イベントリスナはHTML読込時のヘッダで読み込まれるが、イベントリスナの読込元のボタンなどは
// ボディーに書き込まれていることが多い為、ヘッダ読み込み時点ではイベントを取得できない。
// そこで、ページの読み込みを先に行う。
window.onload = function() { 処理 };
// もしくは
window.addEventListener('load', function() { 処理 });
// ノードの中身を書き換え
ノード.innerHTML = 'aaa';
// ノードにクラスを追加
ノード.classListadd("aaa");
// ノードのクラスを削除
ノード.classList.remove("aaa);
// ノードの取得 イベントの発生元となった要素を取得する
this
// オブジェクトを配列に変換
Array.prototype.slice.call()
// 繰り返し処理
配列.forEach( 配列の各要素に対して行う処理(コールバック関数) )
// 配列に対して、引数のDOMと一致した要素番号を取得
配列.indexOf(ノード);