Сложни селектори 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.