.classList

https://developer.mozilla.org/en-US/docs/Web/API/element.classList

classListは、要素のクラス属性のリストを取得して返します。 classListは、element.className経由で空白区切りのクラス名の文字列を取得する代替手段として、要素のクラス名のリストにアクセスするのに便利です。これは下記のメソッドを含みます。

add - 要素のクラスのリストに、クラスを追加します。
remove - 要素のクラスのリストから、クラスを削除します。
toggle - 要素のクラスのリスト内のクラスの有無を切り替えます。後述する2つ目の引数についてを参照してください。
contains - 指定したクラスが、要素のクラスのリストに含まれているかを確認します。

文法

var elementClasses = elementNodeReference.classList;

elementClassesには、 elementNodeReferenceのクラス属性を表すDOMTokenListが格納されます。もしクラス属性が設定されていない、または空の場合、elementClasses.lengthは0を返します。 element.classListそれ自身は読み取り専用ですが、add()とremove()メソッドを使用して、変更することが可能です。

toggle()メソッドは真偽値によって、強制的にクラス名を追加または削除する任意の2つ目の引数を持ちます。例えば、クラスを削除(存在するしないに関わらず)するために、 element.classList.toggle('classToBeRemoved', false);を呼び出し、クラスを追加(存在するしないに関わらず)するために、 element.classList.toggle('classToBeAdded', true);を呼び出します。

例

// divはclass="foo bar"を持つ<div>要素オブジェクトへの参照です。
div.classList.remove("foo");
div.classList.add("anotherclass");

// もしvisibleがあれば削除され、そうでなければ追加されます。
div.classList.toggle("visible");

alert(div.classList.contains("foo"));

div.classList.add("foo","bar"); //複数のクラスを追加

他の実装のためのJavaScript Shim(楔)

注意: このShimはバージョン8未満のInternet Explorerでは動作しません。

/*
 * classList.js: Cross-browser full element.classList implementation.
 * 2014-01-31
 *
 * By Eli Grey, http://eligrey.com
 * Public Domain.
 * NO WARRANTY EXPRESSED OR IMPLIED. USE AT YOUR OWN RISK.
 */

/*global self, document, DOMException */

/*! @source http://purl.eligrey.com/github/classList.js/blob/master/classList.js*/

if ("document" in self && !("classList" in document.createElement("_"))) {

(function (view) {

"use strict";

if (!('Element' in view)) return;

var
	  classListProp = "classList"
	, protoProp = "prototype"
	, elemCtrProto = view.Element[protoProp]
	, objCtr = Object
	, strTrim = String[protoProp].trim || function () {
		return this.replace(/^ +| +$/g, "");
	}
	, arrIndexOf = Array[protoProp].indexOf || function (item) {
		var
			  i = 0
			, len = this.length
		;
		for (; i < len; i++) {
			if (i in this && this[i] === item) {
				return i;
			}
		}
		return -1;
	}
	// Vendors: please allow content code to instantiate DOMExceptions
	, DOMEx = function (type, message) {
		this.name = type;
		this.code = DOMException[type];
		this.message = message;
	}
	, checkTokenAndGetIndex = function (classList, token) {
		if (token === "") {
			throw new DOMEx(
				  "SYNTAX_ERR"
				, "An invalid or illegal string was specified"
			);
		}
		if (/ /.test(token)) {
			throw new DOMEx(
				  "INVALID_CHARACTER_ERR"
				, "String contains an invalid character"
			);
		}
		return arrIndexOf.call(classList, token);
	}
	, ClassList = function (elem) {
		var
			  trimmedClasses = strTrim.call(elem.getAttribute("class") || "")
			, classes = trimmedClasses ? trimmedClasses.split(/ +/) : []
			, i = 0
			, len = classes.length
		;
		for (; i < len; i++) {
			this.push(classes[i]);
		}
		this._updateClassName = function () {
			elem.setAttribute("class", this.toString());
		};
	}
	, classListProto = ClassList[protoProp] = []
	, classListGetter = function () {
		return new ClassList(this);
	}
;
// Most DOMException implementations don't allow calling DOMException's toString()
// on non-DOMExceptions. Error's toString() is sufficient here.
DOMEx[protoProp] = Error[protoProp];
classListProto.item = function (i) {
	return this[i] || null;
};
classListProto.contains = function (token) {
	token += "";
	return checkTokenAndGetIndex(this, token) !== -1;
};
classListProto.add = function () {
	var
		  tokens = arguments
		, i = 0
		, l = tokens.length
		, token
		, updated = false
	;
	do {
		token = tokens[i] + "";
		if (checkTokenAndGetIndex(this, token) === -1) {
			this.push(token);
			updated = true;
		}
	}
	while (++i < l);

	if (updated) {
		this._updateClassName();
	}
};
classListProto.remove = function () {
	var
		  tokens = arguments
		, i = 0
		, l = tokens.length
		, token
		, updated = false
	;
	do {
		token = tokens[i] + "";
		var index = checkTokenAndGetIndex(this, token);
		if (index !== -1) {
			this.splice(index, 1);
			updated = true;
		}
	}
	while (++i < l);

	if (updated) {
		this._updateClassName();
	}
};
classListProto.toggle = function (token, force) {
	token += "";

	var
		  result = this.contains(token)
		, method = result ?
			force !== true && "remove"
		:
			force !== false && "add"
	;

	if (method) {
		this[method](token);
	}

	return !result;
};
classListProto.toString = function () {
	return this.join(" ");
};

if (objCtr.defineProperty) {
	var classListPropDesc = {
		  get: classListGetter
		, enumerable: true
		, configurable: true
	};
	try {
		objCtr.defineProperty(elemCtrProto, classListProp, classListPropDesc);
	} catch (ex) { // IE 8 doesn't support enumerable:true
		if (ex.number === -0x7FF5EC54) {
			classListPropDesc.enumerable = false;
			objCtr.defineProperty(elemCtrProto, classListProp, classListPropDesc);
		}
	}
} else if (objCtr[protoProp].__defineGetter__) {
	elemCtrProto.__defineGetter__(classListProp, classListGetter);
}

}(self));

}

ブラウザ互換性

デスクトップ
機能	Chrome	Firefox (Gecko)	IE	Opera	Safari
基本	8.0	3.6 (1.9.2)	10	11.5	5.1
toggleメソッドの second引数	24	24 (24)	×	15	◯

モバイル
機能	Android	Firefox Mobile	IE Mobile	Opera Mobile	Safari Mobile
基本	3.0	1.0 (1.9.2)	10	11.1	5.0
toggleメソッドの second引数	?		24.0 (24)	?	?	?

仕様

http://www.whatwg.org/specs/web-apps/current-work/multipage/elements.html#dom-classlist

.classList

文法

例

他の実装のためのJavaScript Shim(楔)

ブラウザ互換性

仕様

関連項目