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.