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 が誤って文書中に複数使用されていた場合は、最初に一致する要素を返します。

引数で指定されたセレクターが無効であった場合、 DOMExceptionSYNTAX_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
# ref-for-dom-parentnode-queryselector①

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
querySelector

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

関連情報