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

Нека направим нещо по-сложно. Например, нека имаме следния HTML код:

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

Нека получим референция към input полето, намиращо се вътре в блока #parent:

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

Както виждате, получихме нашия input чрез селектора #parent input. Всъщност този CSS селектор се отнася за всички input полета, намиращи се в #parent.

Например, нека имаме две такива input полета:

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

Тогава, ако напишем селектора #parent input в CSS кода, той ще засегне и двете наши input полета:

#parent input {
	color: red;
}

Методът querySelector обаче не работи по този начин. Той винаги получава само един елемент - първия, който отговаря на указания селектор. Нека разгледаме пример. Нека имаме input полета с клас elem:

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

Нека получим първото от тези input полета:

let elem = document.querySelector('.elem');
console.log(elem); // тук ще бъде първото input поле

Даден е следният HTML:

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

Получете референция към първия параграф от div с id, равен на block.

Даден е следният HTML:

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

Получете референция към първия параграф от div с клас block.

Даден е следният HTML:

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

Получете референция към първия параграф с клас www.