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:

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

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

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

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

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

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

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

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