JavaScript から HTML Element の class 属性を取得する方法

JavaScript から HTML 要素の class 属性を読み取ったり変更したりしたいとき、DOM の Element#getAttribute メソッドおよび Element#setAttribute メソッドを使用することができます。

// HTML 要素の取得

var elem = document.getElementById("XXXX");

// class 属性に設定されている値を取得

elem.getAttribute("class");

ただし、Internet Explorer 6 や 7 ではこの方法ではだめです、という話を前に書きました。前に書いた記事のように Element#getAttribute メソッドの引数を "className" とすれば IE6 や 7 でもちゃんと class 名を取得できますが、せっかくなのでクロスブラウザで使用できる方法を書いておこうと思います。

DOM HTML を使用して HTML 要素の class 名を取得

HTML 文書を簡単に操作するための API として DOM HTML があります。ここでは DOM HTML を使用して HTML 要素の class 名を取得、変更する方法を書きます。 DOM HTML の Level 1 の勧告は以下のページです。

Document Object Model (HTML) Level 1

HTML 要素は DOM HTML では interface HTMLElement です。 HTMLElement にはプロパティ *1 className があり、そのプロパティによって HTML 要素の class 名の取得 *2 や変更ができます。

// HTML 要素 (interface HTMLElement を実装しているオブジェクト) を取得

var elem = document.getElementById("XXXX");

// class 名の取得

var className = elem.className;

// class 名の設定

elem.className = "test";

DOM HTML は現在主に使われているブラウザには実装されていますので、ブラウザの判定などせずにどのブラウザでも同じ方法で class 名の取得、変更ができます。

複数の class 名が設定されている場合

HTML 要素には、space characters を区切りにして複数の class 名を設定する事ができます。

<div class="className1 className2">
  ...
</div>

ここで、space characters は U+0020、U+0009、U+000A、U+000C、U+000D の 5 文字 *3 です。というわけでこの 5 文字を区切り文字として string#split メソッドを使用すれば複数の class 名を配列で取得できます。

// HTML 要素 (interface HTMLElement を実装しているオブジェクト) を取得
var elem = document.getElementById( "XXXX" );
// class 名を space characters 区切りで取得 (不要なスペースは削除する)
var classNames = elem.className.
                 replace( /(?:^[\x09\x0A\x0C\x0D\x20]+)|(?:[\x09\x0A\x0C\x0D\x20]+$)/g, "").
                 split( /[\x09\x0A\x0C\x0D\x20]+/ );