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