特定のクラス名を変更したい

Question

前提・実現したいこと

スマホ表示時のみ、特定クラス名を変更したい

発生している問題・エラーメッセージ

HTMLに最初に出てくる該当クラス名しか変更されない

該当のソースコード

$(function() {
    sp_slide();
});
 
// スマートフォン・タブレットのみ　sp_slideクラスをsliderに変更
function sp_slide() {
    var ua = navigator.userAgent.toLowerCase();
    var isSpTb = (ua.indexOf('iphone') > -1) || (ua.indexOf('ipad') > -1) || (ua.indexOf('android') > -1);
    if(!isSpTb) {
        return;
    }
	var element = document.getElementsByClassName("sp_slide");
	for (var i=0;i<element.length;i++) {
	  element[i].className = "slider";
	}
}

試したこと

ここに問題に対して試したことを記載してください。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Answer 1

<p class='test'>test<p>
<p class='test'>test<p>
<p class='test'>test<p>

.test {
  font-size: 12px;
}

.demo {
  font-size: 24px;
}

var elements = document.querySelectorAll('.test');

elements.forEach(function(element) {
	element.className = "demo";
})

上手く行かないパターンの説明

var elements = document.getElementsByClassName('test');

var i = 0;
for (i; i <= elements.length; i++) {
    elements[i].className = "demo";
}

document.getElementsByClassName()は、引数に与えたクラス名にマッチしたDOMノードを,
HTMLCollectionインターフェイスを持つ配列のようなリストに入れて返してくれます。

HTMLCollectionの説明をMDNで確認すると、以下のような説明があります。

An HTMLCollection in the HTML DOM is live; it is automatically updated when the underlying document is changed.

ここに書いてある通り、HTMLCollectionはそこに含まれる内容に変更があった場合、自動で最新の状態に更新されてしまいます。

var elements = document.getElementsByClassName('test');
console.log(elements.length) //3
elements[0].className = "demo";
console.log(elements.length); //2

なので、このようにHTMLCollectionに含まれるDOMノードのクラス名を変えてしまうと、クラス名が変更したことによって、そのDOMノードはHTMLCollectionから除外され、リストのlengthも変わってしまいます。

これによって、for loopでクラス名を変更させようとした場合に、lengthの値が変わってしまうため、上手く帳尻が合わなくなってしまいます。

The Element method querySelectorAll() returns a static (not live) NodeList representing a list of the document's elements that match the specified group of selectors. (MDN)

一方、document.querySelectorAll()は、HTMLCollectionではなく、NodeListを返してくれて、NodeListはHTMLCollectionとは異なり、静的なものなので、より直感的に扱うことが出来ます。

参考

• getElementsByClassName

• HTMLCollection

• querySelectorAll

デバッグについて

console.logを活用したり、Chrome Developer Toolやエディターのデバッグ機能を活用して、気になるところの値を確認すると、上手くいっていない部分の特定がしやすいと思います。https://developers.google.com/web/tools/chrome-devtools/javascript/?hl=ja

Comments

[natsu_minamo]

お早い回答、本当にありがとうございます！

getElementＸＸＸＸ　しか知らなくて、お恥ずかしい限りです。
勉強になりました。　ありがとうございます！

[HayatoKamono]

今回の質問のやつはハマるかもしれませんね！あとで追記で解説加えます。

[natsu_minamo]

細かい解説、ありがとうございます。

「自動で最新の状態に更新」・・便利なようで知らないと怖いですね。。
実は昨日から10時間近く困っていました。　
もう、htmlやjavaの文法まで。。どこかに私のミスがあるという事しか考えず(涙
目から鱗でした。

ちゃんと調べて、自分で理解して使えるよう頑張ります。
この度は、本当にありがとうございました！

[HayatoKamono]

１０時間ほどもハマってしまったのは大変でしたね。追記しましたが、検索やドキュメントを探る調査力に加えて、デバッグスキルも身につけると自己解決に至りやすくなると思います。