要素の取得方法の違いと使い分け

Question

知りたいこと

HTMLから要素を取得する際に大きく2種類の書き方があるように思います。
どのように使い分けたらいいでしょうか？

2種類の書き方

例えば下記HTML要素を取得したい場合、

<div id="hoge">hoge</div>

<div class="fuga">fuga</div>

<div class="fuga-fuga">fuga-fuga</div>
<div class="fuga-fuga">fuga-fuga</div>
<div class="fuga-fuga">fuga-fuga</div>

<p>Paragraph</p>

.getXXXXXXX()で取得

const hoge =document.getElementById('hoge');
const fuga = document.getElementsByClassName('fuga')[0];
const fugaFuga = document.getElementsByClassName('fuga-fuga');
const p = document.getElementsByTagName('p')[0];

.querySelector() / .querySelectorAll()で取得

const hoge = document.querySelector('#hoge');
const fuga = document.querySelector('.fuga');
const fugaFuga = document.querySelectorAll('.fuga-fuga');
const p = document.querySelector('p');

2種類あります。console.log(fugaFuga)で確認してみると、HTMLCollectionとNodeListといった違いが見えます。　　
しかし、クリックイベントなど、どちらの要素の取得方法でも問題なく使えるので、違いが分かりません。

こういう操作をするときは、こちら、のような使い分けはありますでしょうか。

Answer 1

こういう操作をするときは、こちら、のような使い分けはありますでしょうか。

1つだけ取るgetElementByIdとquerySelectorについては、特に違いはありません。目的のものを取れる方で書けばいいです。

ただし、getElementsBy***系で取得したものは、動的なリストになる（HTMLの状況が変わればそれに合わせてリストが変化する）という特徴があります。

それが困る場合（たとえば、特定のリストを引いてきてDOMを変化させることで、順次リストから外れていって煩雑となってしまうような場合）には、静的なリストの取れるquerySelectorAllのほうが使いやすいです。

Comments

[Cocode]

ご回答ありがとうございます。動的・静的という違いがあるんですね。もう少し詳しくお伺いしてもいいでしょうか？

> HTMLの状況が変わればそれに合わせてリストが変化する
> 特定のリストを引いてきてDOMを変化させることで、順次リストから外れていって

これらがどういった状況なのか想像ができません。（勉強不足ですみません）
もしよければ、具体的な例のコードなどを見せていただくこと、またはもう少し詳しく解説していただくことは可能でしょうか？

よろしくお願いいたします。

[maisumakun]

たとえば、getElementsByClassNameでリストを取ってから、forで回して当該のクラスを外していったとします。

1つ目からクラスを外した時点でリストから外れてしまうので、forでインデックスを1つ進めると今の2つ目（元の3つ目）を読むこととなり、元の2つ目は処理から抜け落ちてしまいます。

（なお、この例に限らず、「リストを対象にループを回しながら、そのリストを改変する」行為は注意が必要です）

[Cocode]

想像できました！ありがとうございます。.getElementsByXXXX()すごく不便じゃないですか！使用するメリットをあまり感じられません。

ですが、他の方が回答してくださっていることによると、.getElementsByXXXX()の方が速度が速いらしい？ので速度を重視するときに使用するのでしょうか。

何度も質問すみません。

Answer 2

querySelector/querySelectorAllの方が汎用性が高いです

HTMLCollectionとNodeListは前者が動的、後者が静的です
具体的にはgetElementsByClassNameで指定するとその後任意のHTML要素に
当該のclassを付加しても掴むことができます。
逆にquerySelectorAllで得たリストは、コールした時点のものしかつかめません

Comments

[Cocode]

ご回答ありがとうございます！

`querySelectorAll`は、一度取得したリストから変化しない、ということはなんとなく理解できました！ありがとうございます。

ただ、

> getElementsByClassNameで指定するとその後任意のHTML要素に
当該のclassを付加しても掴むことができます。

これがどういった操作をしているのか想像ができません。
もしよければ、具体的なコード例などを見せていただくこと、またはもう少し詳しく解説していただくことは可能でしょうか？

お手数をおかけいたします。よろしくお願いいたします。

[yambejp]

<div class="hoge">1</div>
<div class="hoge">2</div>
<div class="hoge">3</div>
<script>
var h1=document.getElementsByClassName('hoge');
var h2=document.querySelectorAll('.hoge');
console.log(h1.length);//3
console.log(h2.length);//3
</script>
<div class="hoge">4</div>
<div class="hoge">5</div>
<script>
console.log(h1.length);//5
console.log(h2.length);//3
</script>

※divの閉じがおかしかったので修正しました。

[Cocode]

なるほどです！すごく分かりやすいです。自分でもコードを書いてみたらすごく納得できました。

.getXXXX()は、JSで後から動的に要素を追加・削除・変更したら、その内容が反映される。
.querySelectorAll()は、最初にHTMLにあった要素を取得してきて内容はそれで固定。
という感じでしょうか。

お手数をおかけしました。ありがとうございました！！

↓私の試したコードです。
<div id="fuga">
<div class="hoge">1</div>
<div class="hoge">2</div>
<div class="hoge">3</div>
</div>

<script>
const fuga = document.querySelector('#fuga');
const getEBCN = document.getElementsByClassName('hoge');
const qSA = document.querySelectorAll('.hoge');

console.log(getEBCN.length); // 3
console.log(qSA.length); // 3

fuga.insertAdjacentHTML('beforeend', `<div class="hoge">4</div><div class="hoge">5</div>`);

console.log(getEBCN.length); // 5
console.log(qSA.length); // 3
</script>

Answer 3

実装にもよると思いますが、おそらく、.getXXXXXXX()の方が速いです。

動的なNodeListオブジェクトの生成は要するにデータに対するエントリを追加する実装になる。シャローコピーといえる。これに対して静的なNodeListオブジェクトの生成は実際に関連するデータをすべてコピーして独立したものして保持する実装になる。ディープコピーというわけだ。実装的にみてディープコピーはシャローコピーよりもコストのかかる処理となる。実装を工夫することで改善は可能だろうが、本質的に静的なNodeListを生成するquerySelectorAll()はgetElementsByTagName()よりも処理時間がかかることになる。

getElementsByTagName()がquerySelectorAll()より高速な理由 | TECH+

Comments

[Cocode]

参考記事ありがとうございます！記事によると、速さなら.getXXXXXXX()の方が優れていて、できる処理の種類は.querySelectorAllの方が多そうですね！