JavaScript

classList.item(n)でクラス名のn番目を取得【JavaScript】

この記事では、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

参考:classNameを使ってクラス名を変更してみる


ウェブつくを支えてくれるスポンサー

  • この記事を書いた人
ウェブつく管理人

ウェブつく管理人

WEB制作の仕事をしています。より簡潔に、より分かりやすく解説していきたいと思い、サイトを運営しています。「読むのが苦にならないサイト」を目指しています。よろしくお願いします。

-JavaScript
-

© 2020 ウェブつく Powered by AFFINGER5