Element: querySelector() メソッド

querySelector() は Element インターフェイスのメソッドで、呼び出された要素の子孫要素の中で、指定されたセレクター群に一致する最初の要素を返します。

構文

querySelector(selectors)

引数

selectors: その要素 (Element) の子孫要素と照合するセレクター群です。これは有効な CSS 構文でなければならず、そうでない場合は SyntaxError 例外が発生します。このセレクター群に一致する最初の要素が返されます。

baseElement の子孫要素のうち、 selectors で指定されたセレクター群に一致するものを返します。照合の際には、 baseElement とその子孫を含む要素群の外にあるものも含めて、要素の階層全体を考慮します。言い換えると、 selectors はまず baseElement ではなく、文書全体に適用され、候補となる要素の初期リストが生成されます。その結果得られた要素が、 baseElement の子孫であるかどうかが調べられます。それらの残りの要素のうち、最初に一致したものが querySelector() メソッドによって返されます。

一致するものが見つからなかったら、返値は null になります。

例外

SyntaxError DOMException: 指定された selectors が無効であった場合に発生します。

例

いくつかの例を検討してみましょう。

属性に特定の値を持つ特定の要素を探す

この最初の例では、 HTML 文書の本文内で type 属性がないか、 type 属性が "text/css" である要素のうち最初のものを返します。

const el = document.body.querySelector(
  "style[type='text/css'], style:not([type])",
);

:scope 擬似クラスを使用して直接の子を取得

この例では :scope 擬似クラスを使用して、 parentElement 要素の直接の子を取得します。

HTML

html

<div>
  <h6>ページタイトル</h6>
  <div id="parent">
    <span>愛は情け深い。</span>
    <span>
      <span>愛は忍耐強い。</span>
    </span>
    <span>
      <span>愛は見返りを求めない。</span>
    </span>
  </div>
</div>

CSS

css

span {
  display: block;
  margin-bottom: 5px;
}
.red span {
  background-color: red;
  padding: 5px;
}

JavaScript

const parentElement = document.querySelector("#parent");
let allChildren = parentElement.querySelectorAll(":scope > span");
allChildren.forEach((item) => item.classList.add("red"));

結果

全体の階層数

この例では、 selectors を適用する際に、文書全体の階層を考慮することを示しています。そのため、位置を照合する際には、指定した baseElement 以外のレベルも考慮されることになります。

HTML

html

<div>
  <h5>オリジナルコンテンツ</h5>
  <p>
    内部の段落
    <span>内部の span</span>
    内部の段落
  </p>
</div>
<div>
  <h5>出力</h5>
  <div id="output"></div>
</div>

JavaScript

const baseElement = document.querySelector("p");
document.getElementById("output").innerHTML =
  baseElement.querySelector("div span").innerHTML;

結果

結果は次のようになります。

"div span" セレクターは、 baseElement の子ノードが <div> 要素を含んでいなくても、 <span> 要素に一致することに注目してください（これはまだ指定したセレクターに含まれています）。

それ以外の例

selectors の適切な書式について、その他の例は Document.querySelector() を参照してください。

仕様書

Specification
DOM Standard # ref-for-dom-parentnode-queryselectorall①

ブラウザーの互換性

BCD tables only load in the browser