querySelector()とは？

Document: querySelector() メソッド

Document の querySelector()メソッドは、指定されたセレクターまたはセレクター群に一致する、文書内の最初の Element を返します。一致するものが見つからない場合は null を返します。

セレクタとは？

あるクラスに一致する最初の要素を探索する

次の例は、クラス "myclass" を持つ文書内の要素の内、最初のものを返します。

const el = document.querySelector(".myclass");

複雑なセレクター

セレクターは、次の例で示しているように、実に力強いものになり得ます。ここでは、文書内で <input> に "login" という名前の付いた最初のもの (<input name="login"/>) のうち、 <div>でクラスが "user-panel main" (<div class="user-panel main">) の中にあるものが返されます。

const el = document.querySelector("div.user-panel.main input[name='login']");

否定

すべての CSS セレクター文字列が妥当な場合、セレクターを否定することもできます。

const el = document.querySelector(
  "div.user-panel:not(.main) input[name='login']"
);

これで、 input要素のうち親にuser-panelクラスのついたdivがあるものの、mainクラスがないものを 1 つ選択します。

出典