Ingewikkelde DOM Element Selekteerders in JavaScript

Laat ons iets meer ingewikkelds doen. Kom ons sê, byvoorbeeld, ons het die volgende HTML-kode:

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

Kom ons verkry 'n verwysing na die invoerveld wat binne die blok #parent is:

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

Soos jy kan sien, het ons ons invoerveld gekry met die selekteerder #parent input. Eintlik pas hierdie CSS-selekteerder op alle invoervelde wat in #parent is.

Kom ons sê, byvoorbeeld, ons het twee sulke invoervelde:

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

Dan, as ons die selekteerder #parent input in CSS-kode skryf, sal dit albei ons invoervelde raak:

css#parent input {
  color: red;
}

Die metode querySelector werk egter nie so nie. Dit verkry altyd slegs een element - die eerste een wat by die gespesifiseerde selekteerder pas. Kom ons kyk na 'n voorbeeld. Kom ons sê ons het invoervelde met die klas elem:

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

Kom ons verkry die eerste een van hierdie invoervelde:

javascriptlet elem = document.querySelector('.elem');
console.log(elem); // hier sal die eerste invoerveld wees

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">teks</p>
<p class="www">teks</p>