Selektor DOM yang Kompleks pada Elemen JavaScript

Mari kita lakukan sesuatu yang lebih kompleks. Misalnya, kita memiliki kode HTML seperti ini:

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

Mari kita dapatkan referensi ke input yang berada di dalam blok #parent:

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

Seperti yang Anda lihat, kita mendapatkan input kita dengan selektor #parent input. Sebenarnya, CSS selector ini akan mencocokkan semua input yang berada di dalam #parent.

Misalnya, kita memiliki dua input seperti ini:

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

Maka, jika kita menulis selektor #parent input dalam kode CSS, itu akan mempengaruhi kedua input kita:

#parent input {
	color: red;
}

Namun, metode querySelector tidak bekerja seperti itu. Ia selalu mengambil hanya satu elemen - yang pertama, yang cocok dengan selektor yang ditentukan. Mari kita lihat contohnya. Misalkan kita memiliki input dengan kelas elem:

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

Mari kita dapatkan input pertama dari ini:

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

Berikut HTML-nya:

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

Dapatkan referensi ke paragraf pertama dari div dengan id sama dengan block.

Berikut HTML-nya:

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

Dapatkan referensi ke paragraf pertama dari div dengan kelas block.

Berikut HTML-nya:

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

Dapatkan referensi ke paragraf pertama dengan kelas www.