JavaScript classList の使い方

HTML要素のクラス属性を操作する classList の使い方。

classList
存在確認
値の数
追加
- 複数のクラス名を一度に追加
削除
- 複数のクラス名を一度に削除
トグル
置換
ループ
- forEach
- entries
- values
- keys

classList

// <div class="foo bar baz"></div>
const element = document.getElementsByTagName('div')[0];


element.classList;
// DOMTokenList(3) ['foo', 'bar', 'baz', value: 'foo bar baz']

element.classList.value;
// 'foo bar baz'


// classList は読み取り専用なので直接の変更は不可
element.classList[0] = 'hello';
// 値は変更されない
element.classList[0]; // foo

// 以下は空の classList になる
element.classList = [];
element.classList;
// DOMTokenList [value: '']

存在確認

// <div class="foo bar baz"></div>
const element = document.getElementsByTagName('div')[0];

element.classList.contains('foo'); // true
element.classList.contains('is-not-there'); // false

値の数

// <div class="foo bar baz"></div>
const element = document.getElementsByTagName('div')[0];

element.classList.length; // 3

追加

// <div class="foo bar baz"></div>
const element = document.getElementsByTagName('div')[0];

element.classList.add('hello');
element.classList;
// DOMTokenList(4) ['foo', 'bar', 'baz', 'hello', value: 'foo bar baz hello']


// 既に在るクラス名は追加されない
element.classList.add('foo');
// DOMTokenList(3) ['foo', 'bar', 'baz', value: 'foo bar baz']

複数のクラス名を一度に追加

// <div></div>
const element = document.getElementsByTagName('div')[0];

const a = ['foo','bar','baz'];
element.classList.add(...a);
element.classList;
// DOMTokenList(3) ['foo', 'bar', 'baz', value: 'foo bar baz']


// 引数は可変長なので以下も同じ
element.classList.add('foo','bar', 'baz');
element.classList;
// DOMTokenList(3) ['foo', 'bar', 'baz', value: 'foo bar baz']

以下でもクラス名を追加できるけどスペースの付け忘れとかしそうだから classList 使ったほうが良い。置換に関しても同じ。

element.className = element.className + ' new-class-name';

削除

// <div class="foo bar baz"></div>
const element = document.getElementsByTagName('div')[0];

element.classList.remove('foo');
element.classList;
// DOMTokenList(2) ['bar', 'baz', value: 'bar baz']


// 存在しないクラス名はそのまま無視される
element.classList.remove('is-not-there');
element.classList;
// DOMTokenList(2) ['bar', 'baz', value: 'bar baz']

複数のクラス名を一度に削除

// <div class="foo bar baz"></div>
const element = document.getElementsByTagName('div')[0];

const a = ['foo','bar','baz'];

element.classList.remove(...a);
element.classList;
// DOMTokenList [value: '']


// 引数は可変長なので以下も同じ
element.classList.remove('foo', 'bar', 'baz');
element.classList;
// DOMTokenList [value: '']

トグル

クラス名が存在していれば削除して、無ければ追加する。

// <div class="foo bar baz"></div>
const element = document.getElementsByTagName('div')[0];

// visible が設定されていれば除去し、なければ追加
element.classList.toggle('visible');

// i が 10 未満であるかどうかの条件によって visible を追加または除去
element.classList.toggle('visible', i < 10 );

置換

// <div class="foo bar baz"></div>
const element = document.getElementsByTagName('div')[0];

element.classList.replace('foo', 'hello');
// true   変更されると true が返る
element.classList;
// DOMTokenList(3) ['hello', 'bar', 'baz', value: 'hello bar baz']


element.classList.replace('is-not-there', 'new-class-name');
// false
element.classList;
// DOMTokenList(3) ['hello', 'bar', 'baz', value: 'hello bar baz']

ループ

// <div class="foo bar baz"></div>
const element = document.getElementsByTagName('div')[0];

for (let i = 0; i < element.classList.length; i++) {
    console.log(element.classList[i]);
    console.log(element.classList.item(i));
    // foo
    // bar
    // baz
}

forEach

// <div class="foo bar baz"></div>
const element = document.getElementsByTagName('div')[0];

element.classList.forEach((value,index,list)=>{console.log(value,index,list)});
// foo 0 DOMTokenList(3) ['foo', 'bar', 'baz', value: 'foo bar baz']
// bar 1 DOMTokenList(3) ['foo', 'bar', 'baz', value: 'foo bar baz']
// baz 2 DOMTokenList(3) ['foo', 'bar', 'baz', value: 'foo bar baz']

entries

// <div class="foo bar baz"></div>
const element = document.getElementsByTagName('div')[0];

const iter = element.classList.entries();

for (let v = iter.next(); !v.done; v = iter.next()) {
    console.log(v.value);
    // [0, 'foo']
    // [1, 'bar']
    // [2, 'baz']
}

values

// <div class="foo bar baz"></div>
const element = document.getElementsByTagName('div')[0];

const iter = element.classList.values();

for (let v = iter.next(); !v.done; v = iter.next()) {
    console.log(v.value);
    // foo
    // bar
    // baz
}

keys

// <div class="foo bar baz"></div>
const element = document.getElementsByTagName('div')[0];

const iter = element.classList.keys();

for (let v = iter.next(); !v.done; v = iter.next()) {
    console.log(v.value);
    // 0
    // 1
    // 2
}