この記事では、classList.item(n)を使ってクラス名のn番目を取得します。
classListに関する他の記事はこちら↓
classList.item(n)とは
element.classListはクラスのコレクションを返します。
element.classList.item(n)でn番目のクラス名を返します。
n番目を取得する
<div id="target" class="apple orange tomato">ターゲット</div>クラス名に「apple orange tomato」の3つが存在します。
2つ目のorangeを取得してみましょう。
var target = document.getElementById('target');
console.log(target.classList.item(1));
// => orangeクラス名を1つずつ全て取得する
色々なやり方がありますが、ここではclassList.item(n)を使ったやり方でやってみます。
var target = document.getElementById('target');
var target_class = target.classList;
for (var i=0; i < target_class.length; i++) {
console.log(target_class.item(i));
}
// apple
// orange
// tomatoクラス名を一気に全て取得する
クラス名を全て取得するにはclassNameを使います。
var target = document.getElementById('target');
console.log(target.className);
// => apple orange tomato