DocumentFragment: querySelector() メソッド

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

DocumentFragment.querySelector() メソッドは、指定されたセレクター群に一致する DocumentFragment の中の最初の要素を（文書ノードの深さ優先前順走査 (depth-first pre-order traversal) を使用して）返します。一致するものがなければ null を返します。

ID に一致するセレクターで、その ID が誤って文書中に複数使用されていた場合は、最初に一致する要素を返します。

引数で指定されたセレクターが無効であった場合、 DOMException が SYNTAX_ERR の値で発生します。

構文

js
querySelector(selectors)

引数

selectors

文字列で、1 つ以上の CSS セレクターをカンマで区切って指定します。

返値

指定された CSS セレクターの集合に一致する文書内の最初の要素を表す Element オブジェクトです。一致する要素がない場合は null が返されます。

例

基本的な例

この基本的な例では、 DocumentFragment の中で "myclass" クラスが返されます。

js
const el = documentfragment.querySelector(".myclass");

CSS の構文とメソッドの引数

querySelector に CSS の構文に従う必要があります。 CSS の構文に従っていない ID やセレクター（例えばセミコロンや空白が不適切に入っているなど）に一致させるには、適合しない文字をバックスラッシュ 2 つでエスケープする必要があります。

html
<div id="foo\bar"></div>
<div id="foo:bar"></div>

<script>
  document.querySelector("#foo\bar"); // 何にも一致しない
  document.querySelector("#foo\\\\bar"); // 最初の div に一致する
  document.querySelector("#foo:bar"); // 何にも一致しない
  document.querySelector("#foo\\:bar"); // 2 つ目の div に一致する
</script>

仕様書

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

ブラウザーの互換性

BCD tables only load in the browser

関連情報