Sarežģītie DOM elementu selektori JavaScript

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

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

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

javascriptlet 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:

html<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:

css#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:

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

Iegūsim pirmo no šiem ievades laukiem:

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

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>