JavaScriptで要素のクラス名を取得する方法

JavaScriptを使用して、HTML要素のクラス名を取得する方法について説明します。以下にいくつかの方法とそれぞれのコード例を示します。

1. getElementByIdメソッドを使用する方法: 要素のid属性を使用して要素を取得し、その要素のclassListプロパティを使用してクラス名を取得します。

const element = document.getElementById('elementId');
const className = element.classList;
console.log(className);

2. getElementsByClassNameメソッドを使用する方法: クラス名を持つ複数の要素を取得し、配列の形式でクラス名にアクセスします。

const elements = document.getElementsByClassName('className');
for (let i = 0; i < elements.length; i++) {
  const className = elements[i].classList;
  console.log(className);
}

3. querySelectorメソッドを使用する方法: CSSセレクタを使用して要素を取得し、その要素のclassListプロパティを使用してクラス名を取得します。

const element = document.querySelector('.className');
const className = element.classList;
console.log(className);

これらの方法を使用すると、JavaScriptでHTML要素のクラス名を取得できます。必要に応じて、取得したクラス名を使用してさまざまな操作を行うこともできます。