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 セレクターをカンマで区切って指定します。
返値
例
基本的な例
この基本的な例では、 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
関連情報
- 所属する
DocumentFragment
インターフェイス