Sarežģītie DOM elementu selektori JavaScript

Darīsim kaut ko sarežģītāku. Pieņemsim, piemēram, ka mums ir šāds HTML kods:

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

Iegūsim atsauci uz ievades lauku, kas atrodas iekšā blokā #parent:

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

Kā jūs redzat, mēs ieguvām savu ievades lauku pēc selektora #parent input. Patiesībā šis CSS selektors atbilst visiem ievades laukiem, kas atrodas #parent.

Pieņemsim, piemēram, ka mums ir divi šādi ievades lauki:

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

Tad, ja rakstīsiet selektoru #parent input CSS kodā, tas ietekmēs abus mūsu ievades laukus:

#parent input {
	color: red;
}

Tomēr metode querySelector strādā citādi. Tā vienmēr iegūst tikai vienu elementu - pirmo, kas atbilst norādītajam selektoram. Apskatīsim piemērā. Pieņemsim, ka mums ir ievades lauki ar klasi elem:

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

Iegūsim pirmo no šiem ievades laukiem:

let elem = document.querySelector('.elem');
console.log(elem); // šeit būs pirmais ievades lauks

Dots šāds HTML:

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

Iegūstiet atsauci uz pirmo rindkopu no div ar id, kas vienāds ar block.

Dots šāds HTML:

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

Iegūstiet atsauci uz pirmo rindkopu no div ar klasi block.

Dots šāds HTML:

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

Iegūstiet atsauci uz pirmo rindkopu ar klasi www.