javascriptのクラス名操作について

質問

javascriptのgetElementsByClassNameについて質問があります。
下記のようなクラス名を削除して別のクラスをつけるサンプルプログラムを作成しましたがjavascriptのエラーが出てクラスの追加できません。

※エラー内容：Uncaught TypeError: Cannot read property 'classList' of undefined
---------以下プログラム--------------

<div class="a">aaa</div>
<script>
var obj = document.getElementsByClassName("a");
obj[0].classList.remove("a");
obj[0].classList.add("b");
</script>

--------以上----------------------------

「obj[0].classList.remove」をした時の前後で「console.log("obj");」をしたところ、
remove後のobjの値が空になっていました。

なぜこうなるか分からないため、分かる方ご教授の程よろしくお願い致します。

回答No.2

think49

t_ohta さんが指摘されたように getElementsByClassName の返り値が live (生きている) からですね。
要素ノードや classList をキャッシュすれば処理順の影響をうけなくなります。

---
<p class="a">a</p>
<script>
'use strict';
var elements = document.getElementsByClassName('a'),
element = elements[0],
classList = element.classList;
classList.remove('a');
classList.add('b');
console.log(element); // <p class="b">a</p>
</script>
---

他に querySelectorAll で live ではない(生きていない) NodeList を使う方法もありますが、elements[0].classList で同じプロパティを何度も参照するのは無駄なのでいずれにしても変数でキャッシュする方法が良いと思います。

Re: 10060805 さん

回答No.1

t_ohta

getElementsByClassName はクラス名を元にオブジェクトを取得しています。
その基となるクラス名を削除したのだから対象から消えると言う事でしょう。

クラス名"B"を追加してから"A"を削除してはどうでしょうか。