JavascriptにはquerySelector(),querySelectorAll()というメソッドがあります。 これの使い道としては、こちらのサイトに
単発のクラス名の場合は getElementsByClassName() メソッドを用いた方が高速な動作となります。また、ID セレクタ ( # ) を対象とする検索も可能ですが、その場合は getElementById() メソッドを用いた方が高速です。対象セレクタが流動的である場合や、または隣接セレクタなどによるコンビネーションセレクタでの複雑な検索の場合において、querySelector() や querySelectorAll() は真価を発揮します。
とありました。
【構文】
element = document.querySelector( selectors );
// クラス名での検索
var el = document.querySelector(".クラス名");
// id名での検索
var el = document.querySelector("#id名");
// クラス名idでの検索
var el = document.querySelector("#id.クラス名");
上述したように、検索する要素が流動的である場合（ボタンで要素の追加等を行うなど）このquerySelector(),querySelectorAll()を使うのが良いみたいです。とくに要素が流動的である場合でのquerySelectorAll()とgetElementsByClassName()にはパフォーマンスに差が出ることがあります。対象とする要素を過不足無く取得したい場合は、querySelectorAll()を使用するのをオススメします。
