特定のclass名（class属性値）から要素を取得

特定のclass名（class属性値）から要素を取得するには、document.getElementsByClassNameメソッドを使用します。

構文

var elements = document.getElementsByClassName(className);

引数

引数名		型	説明
第一引数必須	className	string	所得する要素のclass属性値

戻り値

存在する場合は1個以上のHTMLCollectionを返し、存在しない場合は0個のHTMLCollectionを返します。

サンプルコード

JavaScript

var sampleElements = document.getElementsByClassName('sample');

for (var i = 0, len = sampleElements.length; i < len; i++) {
	// 中略
}

IE8以下の対応について

なお、IE8以下ではdocument.getElementsByClassNameに対応していないため、次のようにdocument.getElementsByTagNameメソッドとclassNameプロパティを組み合わせることで、取得することができます。

関数定義

JavaScript

var getElementsByClassName = function(targetNames) {
	var result        = false,
	    getElement    = false,
	    elements      = null,
	    i             = 0,
	    len           = 0,
	    ii            = 0,
	    iii           = 0,
	    len2          = 0,
	    len3          = 0,
	    getClassNames = [];

	if (!targetNames) return false;

	if (document.getElementsByClassName) {
		if (targetNames instanceof Array) {
			result = [];

			for (i = 0, len = targetNames.length; i < len; i++) {
				getElement = document.getElementsByClassName(targetNames[i]);

				if (getElement.length === 0) continue;

				for (ii = 0, len2 = getElement.length; ii < len2; ii++) {
					if (result.indexOf(getElement[ii]) === -1) {
						result.push(getElement[ii]);
					}
				}
			}
		} else {
			if (targetNames.match(/ /)) {

				targetNames = targetNames.split(/ /);
				result      = [];

				for (i = 0, len = targetNames.length; i < len; i++) {
					getElement = document.getElementsByClassName(targetNames[i]);

					if (getElement.length === 0) continue;

					for (ii = 0, len2 = getElement.length; ii < len2; ii++) {
						if (result.indexOf(getElement[ii]) === -1) {
							result.push(getElement[ii]);
						}
					}
				}
			} else {
				result = document.getElementsByClassName(targetNames);
			}
		}
	} else {
		result = {};

		elements = document.all ? document.all : document.getElementsByTagName('*');

		if (targetNames instanceof Array) {
			result = [];

			for (i = 0, len = elements.length; i < len; i++) {
				getClassNames = elements[i].className.split(/ /);

				for (ii = 0, len2 = targetNames.length; ii < len2; ii++) {
					for (iii = 0, len3 = getClassNames.length; iii < len3; iii++) {
						if (getClassNames[iii] === targetNames[ii]) {
							result.push(elements[i]);
						}
					}
				}
			}
		} else {
			if (targetNames.match(/ /)) {
				targetNames = targetNames.split(/ /);
				result      = [];

				for (i = 0, len = elements.length; i < len; i++) {
					getClassNames = elements[i].className.split(/ /);

					for (ii = 0, len2 = targetNames.length; ii < len2; ii++) {
						for (iii = 0, len3 = getClassNames.length; iii < len3; iii++) {
							if (getClassNames[iii] === targetNames[ii]) {
								result.push(elements[i]);
							}
						}
					}
				}
			} else {
				result = [];

				for (i = 0, len = elements.length; i < len; i++) {
					getClassNames = elements[i].className.split(/ /);
					for (ii = 0, len2 = getClassNames.length; ii < len2; ii++) {
						if (getClassNames[ii] === targetNames) {
							result.push(elements[i]);
						}
					}
				}
			}
		}
	}

	return result;
};

使い方

引数

引数名		型	説明
第一引数必須	id name	string	class属性の値（クラス名）スペース区切りで複数指定することが可能

戻り値

取得した要素を配列で返します。

JavaScript

// 通常
var elements = getElementsByClassName('test');

// スペース区切り
var elements = getElementsByClassName('test sample');

// 配列
var elements = getElementsByClassName(['test', 'sample']);

console.log(elements);

JavaScript逆引きリファレンス一覧へ戻る