Document: querySelector() メソッド
Baseline
広く利用可能
この機能は広く実装されており、多くのバージョンの端末やブラウザーで動作します。2015年7月以降、すべてのブラウザーで利用可能です。
Document の querySelector() メソッドは、指定された CSS セレクターまたは CSS セレクター群に一致する、文書内の最初の要素 (Element) を返します。一致するものが見つからない場合は null を返します。
照合処理は、文書マークアップにおける最初の要素を経由して文書ノードの深さ優先前順走査 (depth-first pre-order traversal) を使用して実行され、子ノードのカウント順で順次ノードを反復して行われます。
指定されたセレクターが、文書内で誤って複数回使用されている ID と一致する場合、その ID を持つ最初の要素が返されます。
CSS 擬似要素はどの要素も返しません。
構文
querySelector(selectors)
引数
返値
Element オブジェクトで、文書内で指定された CSS セレクターに最初に一致する要素を示すオブジェクト、もしくは、一致する要素がない場合は null を返します。
指定されたセレクターに一致するすべての要素のリストが必要な場合は、代わりに querySelectorAll() を使用してください。
例外
SyntaxErrorDOMException-
指定された selectors の構文が無効である場合に発生します。
例
あるクラスに一致する最初の要素を探索する
次の例は、クラス "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 つ選択します。
属性値のエスケープ
この例は、HTML 文書に id として有効な CSS 識別子ではないものが含まれている場合、querySelector() でそれを使用する前に、属性値をエスケープする必要があることを示しています。
HTML
以下のコードでは、<div> 要素の id が "this?element" となっていますが、CSS の識別子では "?" 文字を使用することができないため、これは有効な CSS 識別子ではありません。
また、3 つのボタンと、エラーをログ出力するための <pre> 要素があります。
<div id="this?element"></div>
<button id="no-escape">エスケープなし</button>
<button id="css-escape">CSS.escape()</button>
<button id="manual-escape">手動エスケープ</button>
<pre id="log"></pre>
CSS
div {
background-color: blue;
margin: 1rem 0;
height: 100px;
width: 200px;
}
JavaScript
3 つのボタンはすべて、クリックされると <div> を選択しようとし、その後、その背景色をランダムな値に設定します。
- 1 つ目のボタンは、
"this?element"を直接使用しています。 - 2 つ目のボタンは、
CSS.escape()を使用して値をスケープしています。 - 3 つ目のボタンは、バックスラッシュを使用して
"?"の文字を明示的にエスケープしています。なお、バックスラッシュ自体も、同様に別のバックスラッシュを使用して"\\?"のようにエスケープしなければなりません。
const log = document.querySelector("#log");
function random(number) {
return Math.floor(Math.random() * number);
}
function setBackgroundColor(id) {
log.textContent = "";
try {
const element = document.querySelector(`#${id}`);
const randomColor = `rgb(${random(255)} ${random(255)} ${random(255)})`;
element.style.backgroundColor = randomColor;
} catch (e) {
log.textContent = e;
}
}
document.querySelector("#no-escape").addEventListener("click", () => {
setBackgroundColor("this?element");
});
document.querySelector("#css-escape").addEventListener("click", () => {
setBackgroundColor(CSS.escape("this?element"));
});
document.querySelector("#manual-escape").addEventListener("click", () => {
setBackgroundColor("this\\?element");
});
結果
1 つ目のボタンをクリックするとエラーが発生しますが、2 つ目と 3 つ目のボタンは正常に動作します。
仕様書
| 仕様書 |
|---|
| DOM # ref-for-dom-parentnode-queryselector① |