getElementByシリーズとquerySelectorシリーズの違い

querySelectorとquerySelectorAllの使い方はgetElementByと大体同じで、取得する際に記号を付けます。getElementBy は要素の動的集合を取得し、querySelector は要素の静的集合を取得します。

しかし注意が必要です：getElementBy 系列と querySelector 系列の違い

例えば、for ループを書いて、li タグを取得するたびに、ul が li の子要素を生成します。

<ul id="ul">
    <li>a</li>
    <li>b</li>
    <li>c</li>
</ul>

<script>
    var ul = document.getElementById('ul');
    var li = document.getElementsByTagName('li');

    for(var i = 0;i < li.length; i++) {
        ul.appendChild(document.createElement('li'))
    };

    console.log(li.length);
    // 無限ループに陥る
</script>

i < li.lengthで判断すると、ブラウザが無限ループに陥ります。なぜなら、ループが一度実行されると、ブラウザは再び li タグの配列を取得し、呼び出すたびに文書を再検索するため、無限ループに入ります。

修正するには：i < li.lengthをi < 3に変更し、li タグの配列を静的にし、次に印刷します。

conosle.log(li.length)  // 6

再度 querySelector を使って要素を取得します

<ul id="ul">
    <li>a</li>
    <li>b</li>
    <li>c</li>
</ul>

<script>
    var ul = document.querySelector('ul');
    var li = document.querySelectorAll('li');

    for(var i = 0;i<li.length;i++) {
        ul.appendChild(document.createElement('li'))
    };

    console.log(li.length);
    // 出力結果は元のli.length = 3であり、増加後の6ではありません
</script>

静的集合はquerySelectorAll('li')が ul 内のすべての li を取得した後、後続でどれだけ li を動的に追加しても、そのパラメータには影響しません。