function 手前の !(Exclamation Mark=即時実行) について

• このエクスクラメーション・マークは IIFE (Immediately Invoked Function Expression ) です.
• 即時に実行させる関数のこと. 関数を定義すると同時に実行させています.
• (function ()
  {
  //すぐに実行
  }());
  と同じ.

document.querySelector / document.querySelectorAll について

• document.querySelector と document.querySelectorAll はどちらも CSS セレクターを指定できるメソッドです.
• document.querySelector で指定された値は その HTML の中で一致する最初の CSS セレクター("ひとつ")を取得します.
• document.querySelectorAll("○○○") で指定された値は その HTML の中で一致する全ての CSS セレクターを取得します.
• document.getElementById("○○○") で指定された値は その HTML の中で一致する最初の ID を取得すると同じです.
• document.getElementsByTagName("○○○") / document.getElementsByClassName("○○○") なども同様です.