DOM ელემენტის რთული სელექტორები JavaScript-ში

მოდით, რაღაც უფრო რთული გავაკეთოთ. მაგალითად, მოდით ჩვენ გვქონდეს ასეთი HTML კოდი:

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

მოდით მივიღოთ ლინკი ინპუტზე, რომელიც მდებარეობს ბლოკის #parent შიგნით:

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

როგორც ხედავთ, ჩვენ მივიღეთ ჩვენი ინპუტი სელექტორით #parent input. სინამდვილეში, ამ CSS სელექტორს ემთხვევა ყველა ინპუტი, რომელიც მდებარეობს #parent-ის შიგნით.

მაგალითად, მოდით ჩვენ გვქონდეს ორი ასეთი ინპუტი:

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

მაშინ, თუ დავწერთ სელექტორს #parent input CSS კოდში, ის მოქმედებს ჩვენს ორივე ინპუტზე:

css#parent input {
  color: red;
}

მეთოდი querySelector, თუმცა, ასე არ მუშაობს. ის ყოველთვის იღებს მხოლოდ ერთ ელემენტს - პირველს, რომელიც მოხვდა მითითებულ სელექტორზე. მოდით შევხედოთ მაგალითს. მოდით ჩვენ გვქონდეს ინპუტები კლასით elem:

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

მოდით მივიღოთ პირველი ამ ინპუტებიდან:

javascriptlet elem = document.querySelector('.elem');
console.log(elem); // აქ იქნება პირველი ინპუტი

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>