Bộ chọn DOM phức tạp trong JavaScript

Hãy thử làm điều gì đó phức tạp hơn. Ví dụ, chúng ta có mã HTML như thế này:

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

Hãy lấy tham chiếu đến phần tử input nằm bên trong khối #parent:

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

Như bạn thấy, chúng ta đã lấy được phần tử input bằng bộ chọn #parent input. Thực tế, bộ chọn CSS này sẽ khớp với tất cả các phần tử input nằm bên trong #parent.

Ví dụ, chúng ta có hai phần tử input như sau:

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

Khi đó, nếu viết bộ chọn #parent input trong mã CSS, nó sẽ áp dụng cho cả hai phần tử input của chúng ta:

#parent input {
	color: red;
}

Tuy nhiên, phương thức querySelector lại hoạt động không giống vậy. Nó luôn chỉ lấy một phần tử - phần tử đầu tiên khớp với bộ chọn được chỉ định. Hãy xem ví dụ. Giả sử chúng ta có các phần tử input với lớp elem:

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

Hãy lấy phần tử input đầu tiên trong số này:

let elem = document.querySelector('.elem');
console.log(elem); // ở đây sẽ là phần tử input đầu tiên

Cho HTML sau:

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

Hãy lấy tham chiếu đến đoạn văn đầu tiên bên trong div có id bằng block.

Cho HTML sau:

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

Hãy lấy tham chiếu đến đoạn văn đầu tiên bên trong div có lớp block.

Cho HTML sau:

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

Hãy lấy tham chiếu đến đoạn văn đầu tiên có lớp www.