Pemilih DOM Elemen Kompleks dalam JavaScript

Mari lakukan sesuatu yang lebih kompleks. Sebagai contoh, katakan kita mempunyai kod HTML seperti ini:

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

Mari dapatkan rujukan kepada input yang berada di dalam blok #parent:

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

Seperti yang anda lihat, kami mendapat input kami dengan pemilih #parent input. Sebenarnya, pemilih CSS ini merangkumi semua input yang berada dalam #parent.

Katakan, sebagai contoh, kami mempunyai dua input seperti ini:

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

Kemudian, jika anda menulis pemilih #parent input dalam kod CSS, ia akan menjejaskan kedua-dua input kami:

#parent input {
	color: red;
}

Walau bagaimanapun, kaedah querySelector tidak berfungsi seperti itu. Ia sentiasa mendapatkan hanya satu elemen - yang pertama, yang sepadan dengan pemilih yang ditentukan. Mari lihat contoh. Katakan kami mempunyai input dengan kelas elem:

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

Mari dapatkan input pertama daripada ini:

let elem = document.querySelector('.elem');
console.log(elem); // di sini akan menjadi input pertama

Diberi HTML berikut:

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

Dapatkan rujukan kepada perenggan pertama dari div dengan id sama dengan block.

Diberi HTML berikut:

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

Dapatkan rujukan kepada perenggan pertama dari div dengan kelas block.

Diberi HTML berikut:

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

Dapatkan rujukan kepada perenggan pertama dengan kelas www.