querySelector/querySelectorAll とは、CSS セレクタを指定して要素を取得できるメソッドです。 getElementById や getElementsByClassNameはidやclassから要素を取得しているが、このメソッドでCSSセレクタからも取得できるので重要なメソッドとなる。
しかし、とても便利なのになかなか普及していないし 知名度も低くい。忘れないよう使い方を示しておく。

document.querySelector("#hoge");                // id が hoge の要素を取得
document.querySelector("section>h2");           // section 直下の h2 を取得
document.querySelector("input[type='submit]");  // type が submit の要素を取得
document.querySelector(".foo");                 // class が foo の最初の要素を取得
document.querySelectorAll(".foo");              // class が foo の要素を配列として全て取得
document.querySelectorAll(".foo, .bar");        // class が foo もしくは bar の要素を配列として全て取得