Javascript基本集(4)~DOM操作~

DOMとはDocument Object Model(ドキュメントオブジェクトモデル)の略称で、
HTMLを解析し、データを作成する仕組みのこと。

HTMLは階層構造になっており、DOMによって解析されたHTMLは、階層構造のあるデータとなる。
このことを、DOMツリーやドキュメントツリーと呼び、JavaScriptを使うとDOMツリーを操作してCSSを変更したり、要素を増やしたり、消したりすることが可能。
DOMツリーの一部のことを、ノードオブジェクトと呼ぶ。

ノードの取得

①document.getElementById("id名");

引数に渡したidを持つ要素を取得出来る。

②document.getElementsByClassName("class名");

同じclassを持つ要素を全て取得することが可能。

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

引数で指定したセレクタに合致するもののうち一番最初に見つかった要素1つを取得する。

イベント

HTMLの要素に対して行われた処理要求のこと。
「ノードオブジェクト」に「イベント」が起きた時、「関数」を実行出来る。
一つのイベントと一つの関数を紐付ける仕組みのことをイベントリスナと呼ぶ。

①addEventListener

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

addEventListenerは、あるノードオブジェクトに対して、イベントリスナを追加するメソッド。

②window.onload

ブラウザは上から順に実行をするため、document.getElementById("id名")等のJavaScriptのコードを読み込む際、まだhtmlファイルのheadタグ内までしか読み込まれておらず、bodyタグ内にあるコードは読み込まれないので、ノードオブジェクトは取得できない。
ページの読み込みが終わったらjsの中身を実行するようにできるのが、window.onload。

例は２つ

window.onload = function() { 

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

};

window.addEventListener('load', function() { 

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

 });

③innerHTML

innerHTMLを使用するとHTML要素の中身を書き換えることが出来る。

window.addEventListener("load", function() {

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

});

④classList.add

あらかじめ用意されているクラスを追加することが出来る。

// Buttonを取得して、変数で定義
let btn = document.querySelector("#Button");

// クラス追加を押したらクラスが追加される
btn.addEventListener("click", function() {
  changeText.classList.add("クラス名");
});

⑤classList.remove

指定したクラスを削除することが出来る。
　　
他にもありますが、今回はここまで