cre8cre8
AskMe♥

getElementsByClassNameで指定したクラスを全部消す

最近ReactとかAngularとかカッコいいJavaScriptライブラリでてるし、
jQueryを使ったらシロートっぽく思われて嫌だなぁ…と思っているみなさんこんばんわ。たくみです。
今日はjQueryで$('.TARGET_CLASS').removeClass('REMOVE_CLASS');相当のことを
pure JavaScriptでする方法を伝授します!
ぶっちゃけjQuery使ったほうが早(ry

pure JavaScript大好きの方はご存知かもしれませんが、
document.getElementByIdで取得したDOMにclassList.removeを使うと
指定したクラスが消えますよね。
ですが、document.getElementsByClassNameを使って取得したDOMは
そのままだと、classList.removeは使えません。
なので、ちょっと工夫をしてclassList.removeを使えるようにします。
では、サンプルのhtmlを組んでみましょう。

index.htm
1<!doctype html>
2<html>
3<head>
4<meta charset="utf-8">
5</head>
6
7<body>
8<div class="target">Hello!</div>
9<div class="target">My</div>
10<div class="target">Name</div>
11<div class="target">Is</div>
12<div class="target">Takumi</div>
13</body>
14</html>

めっちゃわかりやすいhtmlですね。
お察しの通り、上記のdivタグに付与しているtargetクラスをすべて消します。
jQueryを使うと、$('.target').removeClass('target');で消えますが、
pure JavaScriptで記述する場合は一手間加えます。
では、早速消してみましょう。

remove_classes.js
1var targetElements = document.getElementsByClassName('target');
2[].forEach.call(targetElements, function(elem) {
3    elem.classList.remove('target');
4})

jQueryよりは長いですが、なんとかシンプル(?)に書けました。
それでは、解説してきましょう。
1行目の var targetElements = document.getElementsByClassName('target');
targetクラスが付与されたDOMをすべて取得しています。
このまま、targetElements.classList.remove('target');とできると簡単なのですが、
残念ながら期待通りの動作にならず、エラーでコケます。
そこで、2行目の[].forEach.call(targetElements, function(elem) {を使います。
getElementsByClassNameで取得したDOMは配列で返ってこないため、直接forEachを呼び出すことができません。
そこで、callメソッドを用いて無理やり配列のforEachメソッドを呼び出してひとつづつクラスを消していきます。
getElementsByClassNameで取得したDOMは配列ではありませんが、配列のように扱えるので今回の方法が使えます。

forEachメソッドで一つづつ取得すると、getElementByIdで取得したときと同様、
classListが使えるので、removeを呼び出して指定したクラスを消していくという寸法です。

≪ 前の記事
get,post,delete,putそしてmatchでルーティングを頑張る
次の記事 ≫
CircleCIとRSpec使って継続的インテグレーションしてみる

いいねやコメントを送っていただけると中の人がしっぽ振って大喜びします♪

あなたへのおすすめの記事