JavaScriptでよく使うDOM操作とか

よく使うやつのおさらい。

class操作

classを追加する

document.getElementById(id).classList.add(class);
document.getElementById(id).classList.add(class1, class2); //複数クラスを追加したい時

$(selector).addClass(class); //jQuery

classを削除する

document.getElementById(id).classList.remove(class);

$(selector).removeClass(class); //jQuery

classをもっているか判定

document.getElementById(id).classList.contains(class);

$(selector).hasClass(class) //jQuery

classをとぐる。そのクラスをもっていれば消す、もっていなければ追加

document.getElementById(id).classList.toggle(class);

DOM要素取得

querySelectorが便利。最初にヒットしたDOM要素を返す。getElementByIdもいいけどidをわざわざ指定したくはない時とか

var ele = document.querySelector(selector);

複数要素を取得したい場合はquerySelectorAllを使用

var eleList = document.querySelectorAll(selector);

//全部に共通のclassを追加したい。
for (var i = 0; i < eleList.length; ++i) {
  eleList[i].classList.add(class);
}

querySelector しか使わなくなってきた…

カスタムデータ属性を扱う

data-* の取得。自分で値をつくることができるカスタムデータ属性は使いはじめると止まらない。

document.getElementById(id).getAttribute('data-*');

data-* のセットとリセット

document.getElementById(id).setAttribute('data-*', data);

// リセットしたい時は空文字を指定
document.getElementById(id).setAttribute('data-*', '');

targetとcurrentTarget

下のような場合を考えてみるとわかりやすい

<a href='#' id='target-test' data-sample='1'>
  <span data-sample='2'>Hello World!!</span>
</a>

a要素に onclick イベントを追加して data-sample の値を出力してみると a>span を click した場合の出力結果が違う。

document.getElementById('target-sample').onclick = function (e) {
  e.preventDefault(); // link で飛んでかないように
  console.log(e.target.getAttribute('data-sample'));         // 2
  console.log(e.currentTarget.getAttribute('data-sample'));  // 1
}

イメージとしては target は押下された DOM要素を取得し、currentTarget はイベントが関連付けられている DOM要素を取得する

onclick と addEventListener('click') の違い

要するに上書きされるかどうか。onclick は上書きされるが、addEventListener で click イベントを拾う場合、その前に関連付けられていた処理も残っている。

この場合、要素がクリックされると 2 が出力される

document.getElementById(id).onclick = function () {
  console.log('1');
}

document.getElementById(id).onclick = function () {
  console.log('2');
}

addEventListener では 1 2 が出力される。

document.getElementById(id).addEventListener(function () {
  console.log('1');
}, false);

document.getElementById(id).addEventListener(function () {
  console.log('2');
}, false);