Ingewikkelde DOM Element Selekteerders in JavaScript

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

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

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

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

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

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

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

Kom ons verkry die eerste een van hierdie invoervelde:

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

Die volgende HTML word gegee:

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

Verkry 'n verwysing na die eerste paragraaf uit die div met id gelyk aan block.

Die volgende HTML word gegee:

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

Verkry 'n verwysing na die eerste paragraaf uit die div met klas block.

Die volgende HTML word gegee:

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

Verkry 'n verwysing na die eerste paragraaf met klas www.