memocarilog

JavaScript の getElementsByClassName() メソッドを使えばクラス名で要素の取得ができますが、IE8 以下には対応していません。IE8以下でクラス名から要素を取得する方法をまとめました。

1. getElementsByClassName.js ライブラリーを使う

getElementsByClassName.js ライブラリーを利用すれば、簡単に getElementsByClassName メソッドが IE8 以下にも適応されるようになります。ただし、ライブラリーに対処部分を頼るため、仕方ないと思いますが動作が少し遅いようです。

配布先・使い方

以下のリンク先よりライブラリーを入手できます。
getElementsByClassNameメソッド – JavaScript ライブラリー – HTML5.JP

使い方はライブラリーのJSファイルを読み込むだけです。

2. querySelector()/querySelectorAll() メソッドを使う

querySelector() メソッドを使うとCSSのセレクタ形式で要素を取得できます。
querySelector() は指定されたセレクタの最初の要素を取得し、querySelectorAll() では、指定されたセレクタを全て取得できます。クラスやIDを指定すればそのクラスやIDも取得できます。

IE8 以上で実装された仕様のようです。

使い方

使い方は、CSSのようにセレクタ指定をするだけなので簡単です。

document.querySelector('.クラス名');
document.querySelectorAll('.クラス名');

ただし、getElementsByClassName() メソッドを使用したほうが高速なようです。querySelector は複雑な指定をするのを目的としたメソッドということみたいです。

3. IE8 以下では getElementsByTagName() メソッドを使う

getElementsByTagName() メソッドですべての要素を取得してクラス名と一致するものを配列に取り出します。getElementsByClassName.js ライブラリーで動作が遅くなることを考えるとこちらの方法の方がよいのかもしれません。

コード例

var className = []; 
var allElements = targetNode.getElementsByTagName(' * ');
 
for (var i = 0,  j = 0; i < allElements.length; i++){
	if (searchNodes[i].className == 'クラス名'){
		className[j] = searchNodes[i];
		j++;
		// allElements からクラス名が一致したものを className へ入れる
		// 変数 j は配列のキーとなる番号
	}
}

このコードで変数 className に指定のクラスが付いた要素が入ります。

ボタンをクリックで指定クラス要素の色を変更するサンプル

上記の getElementsByTagName() メソッドを使ったコードで、指定のクラス名が付いた要素の色を変更するということをやってみました。ボタンをクリックすると .example が付与された p 要素の色が変更されます。

See the Pen .exampleを赤にするサンプル by Saomocari (@Saomocari) on CodePen.

サンプルのHTMLコード

<button id="btn">.exampleを赤にする</button>
<div>
    <p>text1</p>
    <p class="example">text2</p>
    <p>text3</p>
    <p class="example">text4</p>
    <p>text5</p>
</div>

サンプルのJavaScriptコード

window.onload = init;
function init() {
    var btn = document.getElementById('btn');
    var className = [];
    var allElements = document.getElementsByTagName('p');
        
    btn.addEventListener('click', getClassName ,false);
            
    function getClassName(){
        for (var i = 0; i < allElements.length; i++){
            if (allElements[i].className == 'example'){
                var target = allElements[i];
                target.style.background = '#ED749A'　;
                target.style.boxShadow = '0 5px 0 #E52540'
            }
        }
    }
}

addEventListener もIE8以下の対応していないので、このサンプルでは完全にIE対応できていません…。JavaScript が書けるようになったらかっこいいしプログラムスキルを上げたいという理由で JavaScript の勉強を始めましたが、クロスブラウザを考えるといろいろ面倒臭い部分が多いですね。jQuery の偉大さをただただ感じるばかりです…。