Складаныя селектары 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>

Тады, калі напісаць селектар #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>