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

Ајде да направиме нешто покомплексно. Нека, на пример, го имаме следниот HTML код:

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

Ајде да ја добиеме референцата за input полето, кое се наоѓа внатре во блокот #parent:

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

Како што можете да видите, го добивме нашето input поле со селекторот #parent input. Всушност, овој CSS селектор ги опфаќа сите input полиња, кои се наоѓаат во #parent.

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

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

Тогаш, ако се напише селекторот #parent input во CSS кодот, тој ќе ги опфати и двете од нашите input полиња:

css#parent input {
  color: red;
}

Меѓутоа, методот querySelector не функционира на тој начин. Секогаш го добива само еден елемент - првиот, кој што одговара на наведениот селектор. Ајде да погледнеме на пример. Нека имаме input полиња со класа elem:

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

Ајде да го добиеме првото од овие input полиња:

javascriptlet elem = document.querySelector('.elem');
console.log(elem); // овде ќе биде првото input поле

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>