JavaScript | classNameで複数のclass名を配列として取得する方法

2020-11-272023-03-03JavaScript CSSセレクタ,JavaScript

JavaScriptのclassNameで複数のclass名を配列として取得する方法を紹介しています。

classNameで要素のclass名を取得する際、対象の要素のclass名が複数指定されている場合は配列ではなく半角スペース区切りでの返り値となります。

正確には、半角スペースで区切られて返されているのではなく要素に指定されているHTMLでのclassの値（class=""の中身）がそのまま返されているだけです。
連続した半角スペースがある場合もそのまま返されることに注意します。

取得した複数のclass名を配列に含めたい場合、単純に半角スペースで分割して処理していく方法が簡単です。

idからclassNameで複数のclass名を取得する

サンプルでは以下のようなHTMLコード内の要素を利用して紹介しています。

<div id="item" class="aaa bbb"></div>

idを対象として取得するのでdocument.getElementById()を利用しています。

class名が複数指定されていることを前提としている場合、classNameに続けてsplit()で半角スペースでの分割処理を記述することで複数のclass名を取得することが可能です。

let target = document.getElementById("item");
let class_name = target.className.split(' ');

上記サンプルでは「class_name」に以下の配列が格納されます。

["aaa", "bbb"]

split()は空値に対して実行するとJavaScriptエラーとなりますので、多くの場合はclass名が指定されていない場合を考慮する必要があるかと思います。

let target = document.getElementById("item");
let class_name = '';

if(target.className != ''){
	class_name = target.className.split(' ');
}

class名からclassNameで複数のclass名を取得する

サンプルでは以下のようなHTMLコード内の要素を利用して紹介しています。

<div id="item" class="aaa bbb"></div>

class名を対象に取得しますのでdocument.getElementsByClassName()を利用します。

class名が複数指定されていることを前提としている場合、classNameに続けてsplit()で半角スペースでの分割処理を記述することで複数のclass名を取得することが可能です。

let target = document.getElementsByClassName("aaa");
let class_name = target[0].className.split(' ');

上記サンプルでは「class_name」に以下の配列が格納されます。

["aaa", "bbb"]

対象となるclass名が見つからなかった場合のエラー対策として存在チェックを実装する必要があります。

let target = document.getElementsByClassName("aaa");
let class_name = '';

if(target.className[0]){
	class_name = target.className[0].split(' ');
}