Komplekse DOM-element-selektorer i JavaScript

La oss gjøre noe mer komplisert. La oss for eksempel si at vi har følgende HTML-kode:

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

La oss få en referanse til input-feltet som befinner seg inni blokken #parent:

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

Som du ser, fikk vi tak i input-feltet vårt ved hjelp av selektoren #parent input. Faktisk vil denne CSS-selektoren treffe alle input-felt som befinner seg inni #parent.

La oss si at vi har to slike input-felt:

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

Da, hvis vi skriver selektoren #parent input i CSS-koden, vil den påvirke begge input-feltene våre:

css#parent input {
  color: red;
}

Metoden querySelector derimot fungerer ikke på samme måte. Den henter alltid bare ett element - det første som matcher den angitte selektoren. La oss se på et eksempel. La oss si at vi har input-felt med klassen elem:

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

La oss hente det første av disse input-feltene:

javascriptlet elem = document.querySelector('.elem');
console.log(elem); // her vil det første input-feltet være

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>