Help us understand the problem. What is going on with this article?

JavaScriptでよく使うDOM操作とか

More than 5 years have passed since last update.

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

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);

Kei18
I'm not good at coding, but I like it.
https://kei18.github.io
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away