JavaScriptにおけるDOM要素の複雑なセレクター

もう少し複雑なことをしてみましょう。 例えば、次のようなHTMLコードがあるとします：

html<div id="parent">
  <input>
</div>

ブロック #parent 内にある 入力フィールドへの参照を取得してみましょう：

javascriptlet elem = document.querySelector('#parent input');
console.log(elem);

ご覧の通り、セレクター #parent input を使用して入力フィールドを取得しました。 実際には、このCSSセレクターは #parent 内にあるすべての入力フィールドに マッチします。

例えば、このような入力フィールドが2つあるとします：

html<div id="parent">
  <input value="1">
  <input value="2">
</div>

この場合、CSSコードでセレクター #parent input を書くと、両方の入力フィールドに 影響します：

css#parent input {
  color: red;
}

しかし、querySelector メソッドの 動作は異なります。このメソッドは常に 指定されたセレクターに最初にマッチした 1つの要素のみを取得します。 例を見てみましょう。クラス elem を持つ 入力フィールドがあるとします：

html<input class="elem">
<input class="elem">

これらの入力フィールドの最初の1つを取得しましょう：

javascriptlet elem = document.querySelector('.elem');
console.log(elem); // ここには最初の入力フィールドが入ります

html<div id="block">
  <p>1</p>
  <p>2</p>
</div>

html<div class="block">
  <p>1</p>
  <p>2</p>
</div>

html<p class="www">text</p>
<p class="www">text</p>