JavaScriptにおけるDOM要素の複雑なセレクター
もう少し複雑なことをしてみましょう。 例えば、次のようなHTMLコードがあるとします：
<div id="parent">
<input>
</div>
ブロック #parent 内にある
入力フィールドへの参照を取得してみましょう：
let elem = document.querySelector('#parent input');
console.log(elem);
ご覧の通り、セレクター #parent input
を使用して入力フィールドを取得しました。
実際には、このCSSセレクターは
#parent 内にあるすべての入力フィールドに
マッチします。
例えば、このような入力フィールドが2つあるとします：
<div id="parent">
<input value="1">
<input value="2">
</div>
この場合、CSSコードでセレクター #parent
input を書くと、両方の入力フィールドに
影響します：
#parent input {
color: red;
}
しかし、querySelector メソッドの
動作は異なります。このメソッドは常に
指定されたセレクターに最初にマッチした
1つの要素のみを取得します。
例を見てみましょう。クラス elem を持つ
入力フィールドがあるとします：
<input class="elem">
<input class="elem">
これらの入力フィールドの最初の1つを取得しましょう：
let elem = document.querySelector('.elem');
console.log(elem); // ここには最初の入力フィールドが入ります
次のHTMLがあります：
<div id="block">
<p>1</p>
<p>2</p>
</div>
id が block のdiv内の
最初の段落への参照を取得してください。
次のHTMLがあります：
<div class="block">
<p>1</p>
<p>2</p>
</div>
クラス block を持つdiv内の
最初の段落への参照を取得してください。
次のHTMLがあります：
<p class="www">text</p>
<p class="www">text</p>
クラス www を持つ最初の段落への
参照を取得してください。
