Element.classList- 全てのクラス名を≠配列で取得する

投稿日: / 更新日:

JavaScriptの、ElementオブジェクトのclassListは全てのクラスを取得するプロパティです。

説明

ElementオブジェクトのclassListプロパティは、その要素の全てのクラスを含んだDOMTokenList(≠配列)です。

<a class="syncer arayutw squirrel">SYNCER</a>
// aElement = <a class="syncer arayutw squirrel">SYNCER</a>

// a要素のclassList
// aElement.classList[0] = "syncer"
// aElement.classList[1] = "arayutw"
// aElement.classList[2] = "squirrel"

DOMTokenListは配列と似て非なるものです。配列のようにhoge[0]、hoge[1]とキー番号で参照したりlengthプロパティで要素数を確認できます。また、add()やremove()など専用のメソッドを利用できます。ただし、forEach()など配列に使えるメソッドは利用できません。

// classListを文字列としてコンソールに出力 ( "syncer arayutw squirrel" )
console.log( aElement.classList ) ;

DOMTokenListの特徴として、このオブジェクトを文字列として扱うと、全ての要素を半角スペース( )で区切って一つなぎにしてくれます。なので、例えばaElement.classListを、そのままclassNameプロパティの値に指定することもできます。

サンプルコード

<a id="target" class="syncer arayutw squirrel">SYNCER</a>
// 要素を取得 ( → <a id="target" class="syncer arayutw squirrel">SYNCER</a> )
var aElement = document.getElementById( "target" ) ;

// classListを取得
var classList = aElement.classList ;

// classList[0] = syncer
// classList[1] = arayutw
// classList[2] = squirrel

デモ

a要素のclassListプロパティ(DOMTokenList)を取得して表示します。DOMTokenListは文字列として扱うと、各要素を空白で区切ってくれます。コンソールでDOMTokenListの中身を確認できます。

構文

readonly DOMTokenList classList = Element.classList

返り値

項目説明
classList全てのクラスを含んだDOMTokenList。

関連項目

外部リンク