Сложные селекторы DOM элемента в JavaScript

Давайте сделаем что-нибудь более сложное. Пусть, к примеру, у нас есть вот такой HTML код:

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

Давайте получим ссылку на инпут, находящийся внутри блока #parent:

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

Как вы видите, мы получили наш инпут по селектору #parent input. На самом деле под этот CSS селектор попадают все инпуты, находящиеся в #parent.

Пусть, к примеру, у нас два таких инпута:

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

Toгда, если написать селектор #parent input в CSS коде, он затронет оба наших инпута:

css#parent input {
  color: red;
}

Метод querySelector, однако, работает не так. Он всегда получает только один элемент - первый, попавший под указанный селектор. Давайте посмотрим на примере. Пусть у нас есть инпуты с классом elem:

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

Давайте получим первый из этих инпутов:

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>