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で判定すると、ブラウザが無限ループに陥ります。ループが 1 回行われるたびに、ブラウザは 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 の追加に関係なく、パラメータに影響を与えません。