DOM
CSSクラスのリストを操作する

要素にクラスを追加する簡単な方法は、クラスをclassNameプロパティの最後に追加することです。これによりクラス名が重複するのを防ぐことはできず、クラス名の間にスペースを入れる必要があります。

document.getElementById("link1").className += " foo";
document.getElementById("link2").className += " foo bar";

複数の要素の場合は、クラス名をループ内に追加する必要があります

var els = document.getElementsByClassName("foo"),
  indx = els.length;
while (indx--) {
  els[indx].className += " bar baz";
}

単一のクラス名を文字列として追加することができます。複数のクラス名を追加するには、ES6のスプレッド演算子を使用します。

document.querySelector("#link1").classList.add("foo");
document.querySelector("#link2").classList.add(...['foo', 'bar']);

複数の要素の場合は、クラス名をループ内に追加する必要があります

document.querySelectorAll(".foo").forEach(el => {
  el.classList.add(...['bar', 'baz']);
});

要素から1つのクラスを削除するには、 classNameプロパティを少し操作する必要があります。

var toRemove = "bar",
  el = document.getElementById("link1");
el.className = el.className.replace(new RegExp("\\b" + toRemove + "\\b", "g"), "").trim();

複数のクラス名を削除するにはループが必要です。残りの例では、作業を分離するための関数を使用します

function removeClass(el, name) {
  name = name.split(/\s+/);
  var index = name.length,
    classes = el.className;
  while (index--) {
    classes = classes.replace(new RegExp("\\b" + name[index] + "\\b", "g"), "").trim();
  }
  el.className = classes;
}
var el = document.getElementById("link1");
removeClass(el, "bar baz");

削除する複数のクラス名を持つ複数の要素には、2つのループが必要です

function removeClass(els, name) {
  name = name.split(/\s+/);
  var regex, len,
    index = name.length;
  while (index--) {
    regex = new RegExp("\\b" + name[index] + "\\b", "g");
    len = els.length;
    while (len--) {
      els[len].className = els[len].className.replace(regex, "").trim();
    }
  }
}
var els = document.getElementsByTagName("a");
removeClass(els, "bar baz");

単一のクラス名を文字列として削除することができます。複数のクラス名を削除するには、ES6のスプレッド演算子を使用します。

document.querySelector("#link1").classList.remove("foo");
document.querySelector("#link2").classList.remove(...['foo', 'bar']);

複数の要素の場合は、ループ内のクラス名を削除する必要があります

document.querySelectorAll(".foo").forEach(el => {
  el.classList.remove(...['bar', 'baz']);
});

要素にクラスが含まれているかどうかのテストでは、 classNameプロパティの操作が少し必要です。この例では、配列メソッドを使用してクラスをテストしています。

function hasClass(el, name) {
  var classes = (el && el.className || "").split(/\s+/);
  return classes.indexOf(name) > -1;
}
var el = document.getElementById("link1");
console.log(hasClass(el, "foo"));

複数のクラス名をテストするにはループが必要です。

function hasClass(el, name) {
  name = name.split(/[\s.]+/);
  var hasClass = true,
    classes = (el && el.className || "").split(/\s+/),
    index = name.length;
  while (index--) {
    hasClass = hasClass && classes.indexOf(name[index]) > -1;
  }
  return hasClass;
}
var el = document.getElementById("link1");
console.log(hasClass(el, "foo"));

.indexOf()を使用する代わりに、正規表現の使用を検討することもできます。

function hasClass(el, name) {
  return new RegExp("\\b" + name+ "\\b").test(el.className);
}
var el = document.getElementById("link1");
console.log(hasClass(el, "foo"));

1つのクラス名のテストは次のように行います。

var hasClass = document.querySelector("#link1").classList.contains("foo");

複数のクラス名の場合、 matchesを使用するほうが簡単です。クラスセレクタの使用に注意してください。セレクタは、任意の有効な文字列セレクタ（ID、属性、疑似クラスなど）にすることができます。

var hasClass = document.querySelector("#link1").matches('.foo.bar');
var hasClass = document.querySelector("#link2").matches('a.bar[href]');