【JavaScript】classListとは？使用できるプロパティやメソッドを紹介！

https://sossy-blog.com/useful/5559/

classListで使用できるメソッドの一覧

classListのメソッドを使用することで、指定した要素に付与されているクラスに対して処理を行うことがでいます。

そのため、ここではclassListで使用できるメソッドの一覧をご紹介します。

add()
remove()
toggle()
contains()
replace()
entries()
keys()
values()
toString()
foreach()

add()

add()とは対象の要素に指定したクラスを追加するメソッドになります。

引数にクラス名を指定することで、対象の要素に指定したクラスが追加されるようになります。

● index.htm

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="main.js"></script>
  <link rel="stylesheet" href="style.css">
  <title>classListのプロパティやメソッドの一覧</title>
</head>
<body>
  <h2>add()でクラスを追加</h2>
  <div class= "obj"></div>
  <button type="button">クリック</button>
</body>
</html>

<!DOCTYPE html>

<head>

<title>classListのプロパティやメソッドの一覧</title>

</head>

<body>

<h2>add()でクラスを追加</h2>

</body>

</html>

● style.css

.obj {
  width: 100px;
  height: 100px;
  border: 2px solid black;
}
.color {
  background:lightblue;
  border-color: blue;
}

.obj {

width: 100px;

height: 100px;

border: 2px solid black;

}

.color {

background:lightblue;

border-color: blue;

}

● main.js

window.addEventListener("load", function(){
  let btn = document.querySelector('button')
  
  btn.addEventListener('click', function() {
    let obj = document.querySelector('.obj')
    obj.classList.add('color')
  })
})

window.addEventListener("load", function(){

let btn = document.querySelector('button')

btn.addEventListener('click', function() {

let obj = document.querySelector('.obj')

obj.classList.add('color')

})

実行結果

実行結果(ソースコード)

add()によってクラスの追加を行っています。

そのため、ボタンをクリックすると要素の色が変化しています。

また、ソースコードを確認すると、「color」クラスが追加されています。

もし、add()について詳しく知りたい場合は下記の記事をご参考ください。

https://sossy-blog.com/useful/9523/

remove()

remove()とは対象の要素に付与されているクラスを取り除くメソッドになります。

引数にクラス名を指定することで、対象の要素に付与されているクラスが取り除かれるようなります。

● index.htm

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="main.js"></script>
  <link rel="stylesheet" href="style.css">
  <title>classListのプロパティやメソッドの一覧</title>
</head>
<body>
  <h2>remove()でクラスを削除</h2>
  <div class= "obj color"></div>
  <button type="button">クリック</button>
</body>
</html>

<!DOCTYPE html>

<head>

<title>classListのプロパティやメソッドの一覧</title>

</head>

<body>

<h2>remove()でクラスを削除</h2>

</body>

</html>

● style.css

.obj {
  width: 100px;
  height: 100px;
  border: 2px solid black;
}
.color {
  background:lightblue;
  border-color: blue;
}

.obj {

width: 100px;

height: 100px;

border: 2px solid black;

}

.color {

background:lightblue;

border-color: blue;

}

● main.js

window.addEventListener("load", function(){
  let btn = document.querySelector('button')

  btn.addEventListener('click', function() {
    let obj = document.querySelector('.obj')
    obj.classList.remove('color')
  })
})

window.addEventListener("load", function(){

let btn = document.querySelector('button')

btn.addEventListener('click', function() {

let obj = document.querySelector('.obj')

obj.classList.remove('color')

})

実行結果

実行結果(ソースコード)

remove()によってクラスの削除を行っています。

そのため、ボタンをクリックすると、要素の色が変化しています。

また、ソースコードを確認すると、「color」クラスが削除されています。

もし、remove()について詳しく知りい場合は下記の記事をご参考ください。

https://sossy-blog.com/useful/10576/

toggle()

toggle()とは対象の要素のクラスの付与や剥奪を切り替えるメソッドになります。

引数にクラス名を指定することでクラスが付与されたり剥奪されたりされます。

● index.htm

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="main.js"></script>
  <link rel="stylesheet" href="style.css">
  <title>classListのプロパティやメソッドの一覧</title>
</head>
<body>
  <h2>toggle()でクラスの付与と剥奪を切り替える</h2>
  <div class= "obj"></div>
  <button type="button">クリック</button>
</body>
</html>

<!DOCTYPE html>

<head>

<title>classListのプロパティやメソッドの一覧</title>

</head>

<body>

<h2>toggle()でクラスの付与と剥奪を切り替える</h2>

</body>

</html>

● style.css

.obj {
  width: 100px;
  height: 100px;
  border: 2px solid black;
}
.color {
  background:lightgreen;
  border-color: green;
}

.obj {

width: 100px;

height: 100px;

border: 2px solid black;

}

.color {

background:lightgreen;

border-color: green;

}

● main.js

window.addEventListener("load", function(){
  let btn = document.querySelector('button')

  btn.addEventListener('click', function() {
    let obj = document.querySelector('.obj')
    obj.classList.toggle('color')
  })
})

window.addEventListener("load", function(){

let btn = document.querySelector('button')

btn.addEventListener('click', function() {

let obj = document.querySelector('.obj')

obj.classList.toggle('color')

})

実行結果

実行結果(ソースコード)

toggle()で指定したクラスの付与と剝奪の切り替えを行っています。

そのため、ボタンをクリックするたびに要素の色が変化しています。

また、ソースコードを確認すると、「color」クラスがついたり消えたりしています。

もし、toggle()について詳しく知りたい場合は下記の記事をご参考ください。

【JavaScript】toggle()で要素のクラスの有無を切り替える！

7月 15, 2023

sossy-blog.com/useful/9521

contains()

contains()とは要素に指定したクラスが付与されているかどうかを確認するメソッドとなります。

引数にクラス名を指定し、付与されている場合は「true」、付与されていない場合は「false」の真偽値で返されるようになります。

● index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="main.js"></script>
  <link rel="stylesheet" href="style.css">
  <title>classListのプロパティやメソッドの一覧</title>
</head>
<body>
  <h2>contains()でクラスの付与を確認する</h2>
  <div class= "obj color1"></div>
  <button type="button">クリック</button>
</body>
</html>

<!DOCTYPE html>

<head>

<title>classListのプロパティやメソッドの一覧</title>

</head>

<body>

<h2>contains()でクラスの付与を確認する</h2>

</body>

</html>

● style.css

.obj {
  width: 100px;
  height: 100px;
  border: 2px solid black;
}
.color1 {
  background:lightblue;
  border-color: skyblue;
}
.color2 {
  background:lightpink;
  border-color: pink;
}

.obj {

width: 100px;

height: 100px;

border: 2px solid black;

}

.color1 {

background:lightblue;

border-color: skyblue;

}

.color2 {

background:lightpink;

border-color: pink;

}

● main.js

window.addEventListener("load", function(){
  let btn = document.querySelector('button')

  btn.addEventListener('click', function() {
    let obj = document.querySelector('.obj')
    let flag =  obj.classList.contains('color1')
    if(flag) {
      obj.classList.remove('color1')
      obj.classList.add('color2')
    }
    else {
      obj.classList.add('color1')
      obj.classList.remove('color2')
    }
  })
})

window.addEventListener("load", function(){

let btn = document.querySelector('button')

btn.addEventListener('click', function() {

let obj = document.querySelector('.obj')

let flag = obj.classList.contains('color1')

if(flag) {

obj.classList.remove('color1')

obj.classList.add('color2')

}

else {

obj.classList.add('color1')

obj.classList.remove('color2')

}

})

実行結果

実行結果(ソースコード)

contains()で要素に指定したクラスが付与されているかどうかを確認しています。

今回は「color1」クラスが付与されているかを条件としているため、ボタンをクリックするたびに要素の色が変化しています。

また、ソースコードを確認すると「color1」クラスが「color2」クラスに切り替わっています。

replace()

replace()とは対象の要素に付与されているクラスを別のクラスに置き換えるメソッドになります。

1つ目と2つ目の引数にクラス名を指定することで、1つ目のクラス名を2つ目のクラス名に置き換えます。

● index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="main.js"></script>
  <link rel="stylesheet" href="style.css">
  <title>classListのプロパティやメソッドの一覧</title>
</head>
<body>
  <h2>replace()でクラスを置き換える</h2>
  <div class= "obj color1"></div>
  <button type="button">クリック</button>
</body>
</html>

<!DOCTYPE html>

<head>

<title>classListのプロパティやメソッドの一覧</title>

</head>

<body>

<h2>replace()でクラスを置き換える</h2>

</body>

</html>

● style.css

.obj {
  width: 100px;
  height: 100px;
  border: 2px solid black;
}
.color1 {
  background:lightgreen;
  border-color: green;
}
.color2 {
  background:lightcoral;
  border-color: tomato;
}

.obj {

width: 100px;

height: 100px;

border: 2px solid black;

}

.color1 {

background:lightgreen;

border-color: green;

}

.color2 {

background:lightcoral;

border-color: tomato;

}

● main.js

window.addEventListener("load", function(){
  let btn = document.querySelector('button')

  btn.addEventListener('click', function() {
    let obj = document.querySelector('.obj')
    obj.classList.replace('color1', 'color2')
  })
})

window.addEventListener("load", function(){

let btn = document.querySelector('button')

btn.addEventListener('click', function() {

let obj = document.querySelector('.obj')

obj.classList.replace('color1', 'color2')

})

実行結果

実行結果(ソースコード)

replace()でクラスを指定したクラスで置き換えています。

そのため、ボタンをクリックすると要素の色が変化しています。

また、ソースコードを確認すると「color1」クラスから「color2」クラスに置換されています。

entries()

entries()とは対象の要素に付与されているクラスをオブジェクトで取得するメソッドになります。

● index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="main.js"></script>
  <link rel="stylesheet" href="style.css">
  <title>classListのプロパティやメソッドの一覧</title>
</head>
<body>
  <h2>entries()でクラスをオブジェクトで取得する</h2>
  <div class= "obj color shape"></div>
  <p class= "log">クラス名: <span></span></p>
</body>
</html>

<!DOCTYPE html>

<head>

<title>classListのプロパティやメソッドの一覧</title>

</head>

<body>

<h2>entries()でクラスをオブジェクトで取得する</h2>

</body>

</html>

● style.css

.obj {
  width: 100px;
  height: 100px;
  border: 2px solid black;
}
.color {
  background:lightskyblue;
  border-color: skyblue;
}
.shape {
  border-radius: 20%;
}
.log {
  font-size: 20px;
  font-weight: bold;
}

.obj {

width: 100px;

height: 100px;

border: 2px solid black;

}

.color {

background:lightskyblue;

border-color: skyblue;

}

.shape {

border-radius: 20%;

}

.log {

font-size: 20px;

font-weight: bold;

}

● main.js

window.addEventListener("load", function(){
  let content = ''
  let obj = document.querySelector('.obj')
  let log = document.querySelector('.log span')
  let iterator = obj.classList.entries()
  for (let object of iterator) {
    let data = '['+ object + '], '
    content = content + data
  }
  content = content.substring(0, content.length-2)
  log.textContent = content
})

window.addEventListener("load", function(){

let content = ''

let obj = document.querySelector('.obj')

let log = document.querySelector('.log span')

let iterator = obj.classList.entries()

for (let object of iterator) {

let data = '['+ object + '], '

content = content + data

}

content = content.substring(0, content.length-2)

log.textContent = content

})

実行結果

entries()を使用してクラスオブジェクトを取得しています。

そのため、指定した要素に付与されているクラス名がキーと一緒に画面に表示されています。

keys()

keys()とは対象の要素に付与されているクラスのオブジェクトのキーを取得するメソッドになります。

オブジェクトのキーにはインデックスが格納されており、割り振られる番号は0からになります。

● index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="main.js"></script>
  <link rel="stylesheet" href="style.css">
  <title>classListのプロパティやメソッドの一覧</title>
</head>
<body>
  <h2>keys()でクラスオブジェクトのキーを取得する</h2>
  <div class= "obj color shape"></div>
  <p class= "log">オブジェクトのキー: <span></span></p>
</body>
</html>

<!DOCTYPE html>

<head>

<title>classListのプロパティやメソッドの一覧</title>

</head>

<body>

<h2>keys()でクラスオブジェクトのキーを取得する</h2>

<p class= "log">オブジェクトのキー: <span></span></p>

</body>

</html>

● style.css

.obj {
  width: 100px;
  height: 100px;
  border: 2px solid black;
}
.color {
  background:lightsalmon;
  border-color: orange;
}
.shape {
  border-radius: 20%;
}
.log {
  font-size: 20px;
  font-weight: bold;
}

.obj {

width: 100px;

height: 100px;

border: 2px solid black;

}

.color {

background:lightsalmon;

border-color: orange;

}

.shape {

border-radius: 20%;

}

.log {

font-size: 20px;

font-weight: bold;

}

● main.js

window.addEventListener("load", function(){
  let content = ""
  let obj = document.querySelector('.obj')
  let log = document.querySelector('.log span')
  let keys = obj.classList.keys()
  for (let key of keys) {
    key = key + ', '
    content = content + key
  }
  content = content.substring(0, content.length-2)
  log.textContent = '[' + content + ']'
})

window.addEventListener("load", function(){

let content = ""

let obj = document.querySelector('.obj')

let log = document.querySelector('.log span')

let keys = obj.classList.keys()

for (let key of keys) {

key = key + ', '

content = content + key

}

content = content.substring(0, content.length-2)

log.textContent = '[' + content + ']'

})

実行結果

keys()でクラスオブジェクトのキーを取得しています。

今回、指定した要素には3つのクラスが付与されているため「0,1,2」が表示されています。

values()

values()とは対象の要素に付与されているクラスのオブジェクトの値を取得するメソッドになります。

オブジェクトの値にはクラス名が格納されています。

● index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="main.js"></script>
  <link rel="stylesheet" href="style.css">
  <title>classListのプロパティやメソッドの一覧</title>
</head>
<body>
  <h2>values()でクラスオブジェクトの値を取得する</h2>
  <div class= "obj color shape"></div>
  <p class= "log">オブジェクトの値: <span></span></p>
</body>
</html>

<!DOCTYPE html>

<head>

<title>classListのプロパティやメソッドの一覧</title>

</head>

<body>

<h2>values()でクラスオブジェクトの値を取得する</h2>

<p class= "log">オブジェクトの値: <span></span></p>

</body>

</html>

● style.css

.obj {
  width: 100px;
  height: 100px;
  border: 2px solid black;
}
.color {
  background:lightseagreen;
  border-color: green;
}
.shape {
  border-radius: 20%;
}
.log {
  font-size: 20px;
  font-weight: bold;
}

.obj {

width: 100px;

height: 100px;

border: 2px solid black;

}

.color {

background:lightseagreen;

border-color: green;

}

.shape {

border-radius: 20%;

}

.log {

font-size: 20px;

font-weight: bold;

}

● main.js

window.addEventListener("load", function(){
  let content = ""
  let obj = document.querySelector('.obj')
  let log = document.querySelector('.log span')
  let values = obj.classList.values()
  for (let value of values) {
    value = value + ', '
    content = content + value
  }
  content = content.substring(0, content.length-2)
  log.textContent = '[' + content + ']'
})

window.addEventListener("load", function(){

let content = ""

let obj = document.querySelector('.obj')

let log = document.querySelector('.log span')

let values = obj.classList.values()

for (let value of values) {

value = value + ', '

content = content + value

}

content = content.substring(0, content.length-2)

log.textContent = '[' + content + ']'

})

実行結果

values()でクラスオブジェクトの値を取得しています。

今回、指定した要素には3つのクラスが付与されているため「obj, color, shape」が表示されています。

toString()

toString()とは対象の要素に付与されているクラス名を文字列として取得するメソッドになります。

「クラス1 クラス2」のようにクラス名の間に半角空白を開けた文字列が返されるようになります。

● index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="main.js"></script>
  <link rel="stylesheet" href="style.css">
  <title>classListのプロパティやメソッドの一覧</title>
</head>
<body>
  <h2>toString()でクラス名を文字列で取得する</h2>
  <div class= "obj color shape"></div>
  <p class= "log">クラス名: <span></span></p>
</body>
</html>

<!DOCTYPE html>

<head>

<title>classListのプロパティやメソッドの一覧</title>

</head>

<body>

<h2>toString()でクラス名を文字列で取得する</h2>

</body>

</html>

● style.css

.obj {
  width: 100px;
  height: 100px;
  border: 2px solid black;
}
.color {
  background: lightgray;
  border-color: gray;
}
.shape {
  border-radius: 20%;
}

.obj {

width: 100px;

height: 100px;

border: 2px solid black;

}

.color {

background: lightgray;

border-color: gray;

}

.shape {

border-radius: 20%;

}

● main.js

window.addEventListener("load", function(){
  let obj = document.querySelector('.obj')
  let log = document.querySelector('.log span')
  log.textContent = obj.classList.toString()
})

window.addEventListener("load", function(){

let obj = document.querySelector('.obj')

let log = document.querySelector('.log span')

log.textContent = obj.classList.toString()

})

実行結果

toString()でクラス名を文字列で取得しています。

そのため、「obj color shape」の文字列が表示されています。

forEach()

forEach()とは配列など格納されている要素に対して順番に処理を行うことができるメソッドになります。

そのため、取得したクラスオブジェクトに対して処理を行うことが可能になります。

● index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="main.js"></script>
  <link rel="stylesheet" href="style.css">
  <title>classListのプロパティやメソッドの一覧</title>
</head>
<body>
  <h2>forEach()でクラス名ごとに処理を行う</h2>
  <div class=  "obj color shape"></div>
  <div class= "log"></div>
</body>
</html>

<!DOCTYPE html>

<head>

<title>classListのプロパティやメソッドの一覧</title>

</head>

<body>

<h2>forEach()でクラス名ごとに処理を行う</h2>

</body>

</html>

● style.css

.obj {
  width: 200px;
  height: 200px;
  border: 2px solid black;
}
.color {
  background: lightcoral;
  border: 2px solid red;
}
.shape {
  border-radius: 50%;
}
.log {
  font-weight: bold;
  font-size: 20px;
}

.obj {

width: 200px;

height: 200px;

border: 2px solid black;

}

.color {

background: lightcoral;

border: 2px solid red;

}

.shape {

border-radius: 50%;

}

.log {

font-weight: bold;

font-size: 20px;

}

● main.js

window.addEventListener("load", function(){
  let obj = document.querySelector('.obj')
  let log = document.querySelector('.log')
  obj.classList.forEach(function(value, index) {
    index = index + 1
    value = 'クラス' + index + ': ' + value
    appendHtml(value)
  })
  function appendHtml(value) {
    let html = document.createElement('p')
    html.textContent = value
    log.appendChild(html)
  }
})

window.addEventListener("load", function(){

let obj = document.querySelector('.obj')

let log = document.querySelector('.log')

obj.classList.forEach(function(value, index) {

index = index + 1

value = 'クラス' + index + ': ' + value

appendHtml(value)

})

function appendHtml(value) {

let html = document.createElement('p')

html.textContent = value

log.appendChild(html)

}

})

実行結果

forEach()でクラスごとに繰り返し処理を行っています。

そのため、「クラス1: obj」、「クラス2: color」、「クラス3: shape」が表示されています。

もし、forEach()について詳しく知りたい場合は下記の記事をご参考ください。