Складаныя селектары DOM элемента ў JavaScript

Давайце зробім што-небудзь больш складанае. Хай, напрыклад, у нас ёсць вось такі HTML код:

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

Давайце атрымаем спасылку на інпут, які знаходзіцца ўнутры блока #parent:

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

Як вы бачыце, мы атрымалі наш інпут па селектары #parent input. На самой справе пад гэты CSS селектар трапляюць усе інпуты, якія знаходзяцца ў #parent.

Хай, напрыклад, у нас два такіх інпуты:

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

Тады, калі напісаць селектар #parent input у CSS кодзе, ён закране абодва нашых інпуты:

#parent input {
	color: red;
}

Метад querySelector, аднак, працуе не так. Ён заўсёды атрымлівае толькі адзін элемент - першы, які трапіў пад указаны селектар. Давайце паглядзім на прыкладзе. Хай у нас ёсць інпуты з класам elem:

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

Давайце атрымаем першы з гэтых інпутаў:

let elem = document.querySelector('.elem');
console.log(elem); // тут будзе першы інпут

Дадзены наступны HTML:

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

Атрымайце спасылку на першы абзац з дыва з id, роўным block.

Дадзены наступны HTML:

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

Атрымайце спасылку на першы абзац з дыва з класам block.

Дадзены наступны HTML:

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

Атрымайце спасылку на першы абзац з класам www.