getElementsByClassNameの処理について

おぼえがき。

最近 JavaScriptの document.getElementsByClassName() で取得したDOMに対して操作しようとしてつまづいたお話。

document.getElementsByClassName('クラス名').innerHTML = '';

こういった感じに、特定のクラスに対して処理をしたかったのですが、エラーがでました。
基本をしっかり学んできた人達には、「えっ、当たり前じゃない？」と思われる案件です。

なんで自分が、ここでつまづいたかと言うと、jQueryの記法が原因でした。

$('.クラス名').empty();

jQueryって、これで動いてしまうんですよね。簡単。

修正版

var content = document.getElementsByClassName('クラス名')
for(var i=0; i<content.length(); i++){
  content.innerHTML = '';
}

こんな感じに書き換えましたところ動作しました。
(わかりやすいようにvar使ってますが、実際はconstやlet使う感じでいいです）

getElementsのように複数形の扱いになっている場合は配列で取得されるため、処理を一つ一つループで回す必要があるのですね。

同様に

document.getElementsByTagName('HTMLタグ名')

これも同じで、複数形のDOMは、必ずループなどで処理をする必要がある。

さいごに

jQueryばっかりやってきた自分なので、素のJavaScriptに苦手意識あるので、少しずつ克服していきたいしょぞん。