Giải thích querySelector trong JavaScript: Cú pháp, Bộ chọn nâng cao, Thực hành tốt nhất và Ví dụ

By 佐川 直弘 | Naohiro Sagawa (運営者)

※記事内に広告を含みます。Amazonアソシエイトとして適格販売により収入を得ています。　

1. Giới thiệu: querySelector là gì?

Tổng quan cơ bản và vai trò của querySelector

querySelector là một phương thức trả về phần tử đầu tiên khớp với bộ chọn (selector) được chỉ định.

Hãy xem ví dụ đây.

const element = document.querySelector('.example');
console.log(element);

Đoạn mã này lấy phần tử đầu tiên có tên lớp example.

Ngay cả khi có nhiều phần tử cùng khớp với bộ chọn, chỉ phần tử đầu tiên được trả về.

<div class="example">1</div>
<div class="example">2</div>

Trong trường hợp này, chỉ <div class="example">1</div> đầu tiên sẽ được chọn.

Tại sao querySelector quan trọng trong việc thao tác DOM

querySelector đặc biệt hữu ích trong các tình huống như sau1. Lựa chọn phần tử linh hoạt bằng các bộ chọn CSS
* Hỗ trợ đa dạng các bộ chọn như lớp, ID, thuộc tính và pseudo‑class.

2. Mã sạch ngay cả với cấu trúc phức tạp
   * Tìm nhanh các phần tử lồng nhau hoặc các phần tử có thuộc tính cụ thể.

3. Phong cách JavaScript hiện đại, nhất quán
   * Đa năng hơn getElementById hay getElementsByClassName, và hoạt động tốt với các mẫu JavaScript hiện đại.

Dưới đây là ví dụ chọn một nút cụ thể bên trong một form.

const submitButton = document.querySelector('form button[type="submit"]');
console.log(submitButton);

Đoạn mã này chỉ chọn nút submit bên trong form.

Sự khác nhau giữa querySelector và querySelectorAll

Trong khi querySelector chỉ trả về phần tử khớp đầu tiên, querySelectorAll trả về tất cả các phần tử khớp dưới dạng NodeList.

const elements = document.querySelectorAll('.example');
console.log(elements);

Đoạn mã này lấy tất cả các phần tử có tên lớp example.

Tóm tắt

Trong phần này, chúng tôi đã giải thích khái niệm cơ bản và vai trò của phương thức querySelector trong JavaScript.

Những điểm chính cần nhớ:

1. Bạn có thể linh hoạt chọn phần tử bằng các bộ chọn CSS
2. querySelector chỉ trả về phần tử khớp đầu tiên, trong khi querySelectorAll trả về tất cả các phần tử khớp
3. Đây là một phương thức quan trọng giúp thao tác DOM ngắn gọn và hiệu quả

Trong phần tiếp theo, chúng ta sẽ xem xét kỹ hơn cú pháp cơ bản của querySelector và các ví dụ thực tế.

2. Cú pháp cơ bản và cách dùng querySelector

Cú pháp cơ bản

Cú pháp cơ bản của querySelector như sau:

document.querySelector(selector);

• Tham số : Một chuỗi bộ chọn CSS.
• Giá trị trả về : Phần tử đầu tiên khớp với bộ chọn. Nếu không tìm thấy, trả về null.

Ví dụ: Chọn các phần tử cơ bản

1. Chọn theo ID Vì ID là duy nhất, bạn có thể chắc chắn chỉ chọn một phần tử duy nhất.

   const element = document.querySelector('#header');
   console.log(element);
   

Đoạn mã này chọn phần tử có ID header.

2. Chọn theo lớp Khi chỉ định tên lớp, chỉ phần tử đầu tiên khớp sẽ được trả về.

   const element = document.querySelector('.content');
   console.log(element);
   

Đoạn mã này chọn phần tử đầu tiên có tên lớp content.

3. Chọn theo tên thẻ Bạn cũng có thể chọn phần tử bằng cách chỉ định tên thẻ.

   const element = document.querySelector('p');
   console.log(element);
   

Đoạn mã này chọn thẻ <p> đầu tiên trên trang.

Chọn phần tử bằng các bộ chọn kết hợp

Bằng cách kết hợp các bộ chọn CSS, bạn có thể nhắm mục tiêu phần tử một cách linh hoạt hơn.

1. Bộ chọn lồng nhau Chọn phần tử bằng cách chỉ định quan hệ cha‑con.

   const element = document.querySelector('div.container p');
   console.log(element);
   

Đoạn mã này chọn thẻ <p> đầu tiên bên trong một <div> có lớp container.

2. Bộ chọn thuộc tính Chọn các phần tử có một thuộc tính cụ thể.

   const element = document.querySelector('input[type="text"]');
   console.log(element);
   

Mã này chọn phần tử <input> đầu tiên có thuộc tính type là text.

3. Sử dụng pseudo-classes Sử dụng pseudo-classes để chọn các phần tử ở trạng thái hoặc vị trí cụ thể.

   const element = document.querySelector('li:first-child');
   console.log(element);
   

Mã này chọn phần tử <li> đầu tiên.

Những gì cần làm khi querySelector không tìm thấy phần tử

querySelector trả về null khi không tìm thấy phần tử phù hợp. Vì lý do này, việc kiểm tra xem phần tử có tồn tại sau khi chọn nó là rất quan trọng.

const element = document.querySelector('.nonexistent');
if (element) {
  console.log('Element found');
} else {
  console.log('Element not found');
}

Mã này hoạt động an toàn mà không gây lỗi ngay cả khi phần tử không tồn tại.

Tóm tắt

Trong phần này, chúng ta đã bao quát cú pháp cơ bản và cách sử dụng querySelector.

Tóm tắt nhanh:

1. Bạn có thể dễ dàng chọn phần tử theo ID, class hoặc tên thẻ
2. Bạn có thể linh hoạt chọn phần tử bằng cách kết hợp các bộ chọn phức tạp và pseudo-classes
3. Xử lý lỗi cho các phần tử thiếu cũng rất quan trọng

Trong phần tiếp theo, chúng ta sẽ đi sâu vào các ví dụ sử dụng nâng cao với các bộ chọn mạnh mẽ hơn.

3. Các Ví dụ Nâng Cao: Cách Sử Dụng Các Bộ Chọn Mạnh Mẽ Hơn

Chọn Các Phần Tử Cụ Thể Với Bộ Chọn Thuộc Tính

Các bộ chọn thuộc tính cho phép bạn linh hoạt chọn các phần tử có thuộc tính hoặc giá trị cụ thể.

1. Chọn một phần tử với giá trị thuộc tính cụ thể

   const checkbox = document.querySelector('input[type="checkbox"]');
   console.log(checkbox);
   

Mã này chọn phần tử <input> đầu tiên có thuộc tính type là checkbox.

2. Sử dụng khớp một phần cho giá trị thuộc tính

   const link = document.querySelector('a[href^="https://"]');
   console.log(link);
   

Mã này chọn một liên kết có thuộc tính href bắt đầu bằng https://.

Các bộ chọn thuộc tính thường dùng:

Chọn Với Pseudo-Classes Và Pseudo-Elements

Pseudo-classes và pseudo-elements giúp dễ dàng chọn các phần tử ở trạng thái hoặc vị trí cụ thể.

1. Pseudo-classes cho trạng thái

   const activeLink = document.querySelector('a.active');
   console.log(activeLink);
   

Mã này chọn một liên kết có class active.

2. Pseudo-classes cho vị trí

   const firstItem = document.querySelector('ul > li:first-child');
   console.log(firstItem);
   

Mã này chọn mục đầu tiên trong danh sách.

Các pseudo-classes thường dùng:

Lọc Chi Tiết Với Các Bộ Chọn Hợp Nhất

Bạn cũng có thể kết hợp nhiều bộ chọn để biểu đạt các điều kiện phức tạp hơn.

1. Lọc theo mối quan hệ cha-con

   const nestedElement = document.querySelector('div.container > p.text');
   console.log(nestedElement);
   

Mã này chọn phần tử p đầu tiên có class text bên trong phần tử div có class container.

2. Kết hợp nhiều điều kiện

   const inputField = document.querySelector('input[type="text"].required');
   console.log(inputField);
   

Mã này chọn phần tử <input> đầu tiên có type="text" và cũng có class required.

Tóm tắt

Trong phần này, chúng ta đã giải thích cách sử dụng bộ chọn nâng cao với querySelector.

Các điểm chính:

1. Bộ chọn thuộc tính cho phép lọc linh hoạt các phần tử
2. Pseudo-classes và pseudo-elements cho phép nhắm đến trạng thái và vị trí
3. Bộ chọn hợp nhất giúp dễ dàng chỉ định các điều kiện chi tiết và chọn các mục tiêu phức tạp

Trong phần tiếp theo, chúng ta sẽ bao quát các lưu ý quan trọng và thực hành tốt nhất khi sử dụng querySelector.

4. Các Lưu Ý Và Thực Hành Tốt Nhất Khi Sử Dụng querySelector

Xử Lý Lỗi Và Kiểm Tra Null

Nếu không có phần tử nào khớp với bộ chọn được chỉ định, querySelector trả về null. Vì lý do đó, bạn nên luôn xác nhận phần tử tồn tại trước khi cố gắng thao tác nó.

Ví dụ: Triển khai kiểm tra null

const element = document.querySelector('.nonexistent');
if (element) {
  console.log('Element found');
  element.textContent = 'New text';
} else {
  console.log('Element not found');
}

Mã này an toàn tránh lỗi ngay cả khi phần tử không tồn tại.

Tránh các ký tự đặc biệt

Nếu bộ chọn của bạn chứa các ký tự đặc biệt, querySelector có thể ném lỗi trừ khi bạn thoát chúng đúng cách.

Ví dụ: Chọn một phần tử chứa các ký tự đặc biệt

HTML:

<div id="my.id">Special ID</div>

JavaScript:

const element = document.querySelector('#my\.id');
console.log(element);

Khi xử lý các ký tự đặc biệt (ví dụ: ., #, [, ], v.v.), hãy thoát chúng bằng dấu gạch chéo ngược (\).

Các cân nhắc về hiệu suất

1. Tránh các bộ chọn lồng nhau sâu Khi các bộ chọn trở nên phức tạp hơn, trình duyệt có thể mất nhiều thời gian hơn để tìm phần tử mục tiêu. Hãy sử dụng các bộ chọn đơn giản hơn bất cứ khi nào có thể.

Không khuyến nghị

const element = document.querySelector('div.container > ul > li.item > span.text');

Được khuyến nghị

const container = document.querySelector('.container');
const textElement = container.querySelector('.text');

2. Chọn nhiều phần tử một cách hiệu quả Sử dụng querySelectorAll để lấy tất cả các phần tử mục tiêu và sau đó lọc chúng theo nhu cầu.

   const items = document.querySelectorAll('.item');
   items.forEach((item) => {
     console.log(item.textContent);
   });
   

Các thực hành tốt nhất

1. Sử dụng bộ chọn cụ thể Sử dụng các bộ chọn cụ thể để đảm bảo bạn chỉ chọn phần tử (các phần tử) mong muốn.

   const button = document.querySelector('button.submit');
   

2. Sử dụng quy tắc đặt tên nhất quán Thiết kế tên lớp CSS và ID theo các quy tắc nhất quán để cải thiện khả năng đọc của các bộ chọn.
3. Tập trung vào mã có thể tái sử dụng Nếu bạn thường xuyên chọn một số phần tử nhất định, việc gói logic vào một hàm có thể tái sử dụng sẽ rất tiện lợi.

   function getElement(selector) {
     const element = document.querySelector(selector);
     if (!element) {
       console.warn(`Element not found: ${selector}`);
     }
     return element;
   }
   
   const header = getElement('#header');
   

Tóm tắt

Trong phần này, chúng tôi đã đề cập đến các biện pháp phòng ngừa quan trọng và các cách hiệu quả để sử dụng querySelector.

Các điểm chính:

1. Ngăn ngừa lỗi bằng cách luôn thực hiện kiểm tra null
2. Thoát đúng các bộ chọn có chứa ký tự đặc biệt
3. Thiết kế bộ chọn một cách đơn giản, cân nhắc hiệu suất
4. Sử dụng hàm và quy tắc đặt tên để cải thiện khả năng tái sử dụng và khả năng đọc

Trong phần tiếp theo, chúng tôi sẽ giới thiệu các ví dụ thực tế hữu ích trong các dự án thực tế.

5. Các câu hỏi thường gặp (FAQ) và Giải pháp

Sự khác biệt giữa querySelector và getElementById là gì?

Câu hỏi:
querySelector và getElementById đều có thể được sử dụng để chọn phần tử. Sự khác biệt giữa chúng là gì?

Câu trả lời:

So sánh cách sử dụng:

// With querySelector
const element1 = document.querySelector('#example');

// With getElementById
const element2 = document.getElementById('example');

Bạn nên sử dụng cái nào?

• Đối với việc chọn dựa trên ID đơn giản, getElementById nhanh và được khuyến nghị.
• Khi bạn cần mục tiêu linh hoạt dựa trên bộ chọn, hãy sử dụng querySelector .

Tại sao querySelector đôi khi không hoạt động?

Câu hỏi:
Mặc dù mã của tôi trông đúng, querySelector không hoạt động. Nguyên nhân có thể là gì?

Câu trả lời:

1. Phần tử chưa tồn tại trong DOM

• DOM có thể chưa được tải đầy đủ khi script chạy. Giải pháp : Sử dụng sự kiện DOMContentLoaded.

  document.addEventListener('DOMContentLoaded', () => {
    const element = document.querySelector('.example');
    console.log(element);
  });
  

2. Bộ chọn không chính xác

• Tên lớp hoặc ID có thể sai.

Những gì cần kiểm tra:

• Xác minh bộ chọn trong công cụ phát triển của trình duyệt.

  const element = document.querySelector('.my-class');
  console.log(element); // Check the result in DevTools
  

3. Phần tử được thêm động

• Nếu phần tử được thêm động bằng JavaScript, nó có thể chưa tồn tại vào thời điểm bạn lần đầu cố gắng chọn nó.

Giải pháp:
Gắn một trình lắng nghe sự kiện vào phần tử cha để xử lý các phần tử được thêm động.

document.body.addEventListener('click', (e) => {
  if (e.target.matches('.dynamic-element')) {
    console.log('Clicked');
  }
});

Cách truy cập các phần tử được thêm động

Câu hỏi:
Các phần tử được thêm động có thể được chọn bằng querySelector không?

Trả lời:
Có, chúng có thể. Tuy nhiên, bạn cần chú ý đến thời điểm phần tử được thêm.

Giải pháp 1: Quan sát các phần tử động

const observer = new MutationObserver((mutations) => {
  mutations.forEach((mutation) => {
    if (mutation.addedNodes.length) {
      const newElement = document.querySelector('.dynamic-element');
      if (newElement) {
        console.log('A new element was added:', newElement);
      }
    }
  });
});

observer.observe(document.body, { childList: true, subtree: true });

Giải pháp 2: Sử dụng setTimeout hoặc setInterval

Nếu phần tử được thêm sau một khoảng thời gian nhất định, bạn có thể giám sát nó như sau:

setTimeout(() => {
  const dynamicElement = document.querySelector('.dynamic-element');
  console.log(dynamicElement);
}, 1000); // Check for the element after 1 second

Tóm tắt

Trong phần này, chúng tôi đã đề cập đến các câu hỏi thường gặp và mẹo khắc phục sự cố khi sử dụng querySelector.

Tóm tắt nhanh:

1. Hiểu khi nào nên sử dụng querySelector so với getElementById.
2. Nếu không hoạt động, kiểm tra thời gian tải DOM và lỗi selector.
3. Đối với các phần tử động, sử dụng ủy quyền sự kiện hoặc MutationObserver.

Trong phần tiếp theo, chúng tôi sẽ tóm tắt các điểm chính để sử dụng querySelector một cách hiệu quả.

6. Ví dụ thực tế: Cách sử dụng querySelector trong các dự án thực tế

Lấy giá trị nhập liệu từ biểu mẫu và xác thực chúng

Kịch bản: Khi người dùng nhập giá trị vào biểu mẫu, bạn lấy chúng và thực hiện xác thực.

HTML

<form id="userForm">
  <input type="text" id="username" placeholder="Username">
  <input type="email" id="email" placeholder="Email address">
  <button type="submit">Submit</button>
</form>

JavaScript

const form = document.querySelector('#userForm');

form.addEventListener('submit', (event) => {
  event.preventDefault(); // Prevent form submission

  const username = document.querySelector('#username').value;
  const email = document.querySelector('#email').value;

  if (!username) {
    alert('Please enter a username');
    return;
  }

  if (!email.includes('@')) {
    alert('Please enter a valid email address');
    return;
  }

  alert('The form was submitted successfully');
});

Các điểm chính:

• Sử dụng thuộc tính value để lấy giá trị nhập liệu.
• Thực hiện các kiểm tra xác thực đơn giản trên dữ liệu người dùng.
• Sử dụng trình lắng nghe sự kiện để tùy chỉnh hành vi gửi biểu mẫu.

Cách thêm trình lắng nghe sự kiện vào các phần tử được thêm động

Kịch bản: Áp dụng trình lắng nghe sự kiện vào các phần tử được thêm động bằng JavaScript.

HTML

<div id="container">
  <button id="addButton">Add a button</button>
</div>

JavaScript

const container = document.querySelector('#container');
const addButton = document.querySelector('#addButton');

// Add a new button
addButton.addEventListener('click', () => {
  const newButton = document.createElement('button');
  newButton.classList.add('dynamic-button');
  newButton.textContent = 'Click me!';
  container.appendChild(newButton);
});

// Capture events on the parent element
container.addEventListener('click', (event) => {
  if (event.target.classList.contains('dynamic-button')) {
    alert('The new button was clicked!');
  }
});

Các điểm chính:

• Vì các phần tử được thêm động không thể tham chiếu trực tiếp, hãy gắn trình nghe sự kiện vào một phần tử cha.
• Sử dụng event.target để xác định phần tử nào đã được nhấp.

Mở và Đóng Cửa Sổ Modal

Kịch bản: Thực hiện hành vi mở/đóng modal.

HTML

<div id="modal" class="modal hidden">
  <div class="modal-content">
    <span id="closeModal" class="close">&times;</span>
    <p>This is the modal content.</p>
  </div>
</div>
<button id="openModal">Open modal</button>

CSS

.hidden {
  display: none;
}

.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
}

.modal-content {
  background: white;
  padding: 20px;
  border-radius: 5px;
}

JavaScript

const modal = document.querySelector('#modal');
const openModal = document.querySelector('#openModal');
const closeModal = document.querySelector('#closeModal');

// Open the modal
openModal.addEventListener('click', () => {
  modal.classList.remove('hidden');
});

// Close the modal
closeModal.addEventListener('click', () => {
  modal.classList.add('hidden');
});

// Close when clicking outside the modal
modal.addEventListener('click', (event) => {
  if (event.target === modal) {
    modal.classList.add('hidden');
  }
});

Các điểm chính:

• Sử dụng classList để thêm/xóa lớp và chuyển đổi hiển thị.
• Cải thiện UX bằng cách cho phép modal đóng khi nhấp ra ngoài khu vực nội dung.

Tóm tắt

Trong phần này, chúng tôi đã giới thiệu các ví dụ thực tế về cách sử dụng querySelector trong các tình huống phát triển thực tế.

Bạn đã học được:

1. Thực hiện xử lý biểu mẫu an toàn bằng cách lấy và xác thực dữ liệu người dùng.
2. Xử lý linh hoạt các phần tử được thêm động bằng cách ủy thác sự kiện.
3. Cải thiện giao diện người dùng bằng cách triển khai hành vi mở/đóng modal.

Sử dụng các ví dụ này làm tham khảo và áp dụng chúng vào dự án phát triển của bạn. Trong phần tiếp theo, chúng tôi sẽ kết thúc bài viết bằng cách tóm tắt các điểm chính về việc sử dụng querySelector.

7. Tóm tắt: Những Điểm Chính Khi Sử Dụng querySelector Hiệu Quả

Trong bài viết này, chúng tôi đã trình bày chi tiết phương thức querySelector của JavaScript, từ cơ bản đến các trường hợp sử dụng nâng cao. Cuối cùng, hãy xem lại những điểm quan trọng nhất và tóm tắt cách sử dụng nó một cách hiệu quả.

Vai Trò Cốt Lõi của querySelector

• Lựa chọn phần tử linh hoạt: Bạn có thể chọn các phần tử DOM một cách hiệu quả bằng các bộ chọn CSS.
• Cú pháp đơn giản: Bạn có thể chọn phần tử một cách trực quan bằng tên lớp, ID, tên thẻ và các bộ chọn thuộc tính.
• Hoạt động với các phần tử động: Bằng cách gắn trình nghe sự kiện vào các phần tử cha, bạn có thể xử lý các phần tử được thêm sau.

Ví dụ về cú pháp cơ bản:

const element = document.querySelector('.example');

Sử Dụng Nâng Cao và Các Lưu Ý Quan Trọng

1. Sử dụng các bộ chọn nâng cao

• Các bộ chọn thuộc tính và pseudo-class cho phép bạn nhắm mục tiêu các phần tử một cách chính xác và linh hoạt hơn.
• Ví dụ :

  const element = document.querySelector('input[type="checkbox"]:checked');
  

2. Viết mã chú ý tới hiệu năng

• Giảm tải xử lý bằng cách sử dụng các bộ chọn đơn giản khi có thể.
• Chuyển logic lựa chọn thường dùng thành các hàm tái sử dụng.

2. Xử lý lỗi kỹ lưỡng

• Thực hiện kiểm tra null và xử lý các trường hợp phần tử không tồn tại.
• Ví dụ :

  const element = document.querySelector('.nonexistent');
  if (element) {
    console.log('Element found');
  } else {
    console.log('Element not found');
  }
  

Xem Lại Các Ví Dụ Thực Tế

• Kiểm tra biểu mẫu : Xác thực giá trị nhập để thực hiện xử lý biểu mẫu an toàn.
• Xử lý phần tử động : Xử lý linh hoạt các phần tử được tạo bằng JavaScript.
• Kiểm soát cửa sổ modal : Thêm hành vi tương tác để cải thiện UI/UX.

Thông qua những ví dụ này, bạn đã hiểu được tính thực tiễn và khả năng mở rộng của querySelector.

Mẹo để Tận dụng Tối đa querySelector

1. Tận dụng công cụ phát triển của bạn

• Sử dụng công cụ phát triển của trình duyệt để xác thực và kiểm tra các selector.

1. Ưu tiên tính dễ đọc

• Thiết kế tên selector và cấu trúc mã sao cho dễ hiểu, nâng cao khả năng bảo trì.

1. Sử dụng querySelectorAll khi cần thiết

• Khi làm việc với nhiều phần tử, sử dụng querySelectorAll để thực hiện xử lý hiệu quả.

Tóm tắt

querySelector là một phương thức mạnh mẽ giúp việc thao tác DOM trở nên đơn giản và hiệu quả.

Những điểm chính rút ra từ bài viết này:

• Bạn có thể hiểu mọi thứ từ cách sử dụng cơ bản đến các ví dụ nâng cao một cách có cấu trúc.
• Bằng cách kết hợp các selector và pseudo‑class, bạn có thể nhắm mục tiêu các phần tử một cách linh hoạt hơn.
• Bằng cách xử lý lỗi đúng cách và cân nhắc hiệu năng, bạn có thể viết mã thực tế và đáng tin cậy hơn.

Khi làm việc với việc thao tác DOM trong JavaScript, hãy chắc chắn áp dụng các kỹ thuật được giới thiệu trong bài viết này.

Bước tiếp theo, hãy đào sâu kiến thức về thao tác DOM và nâng cao kỹ năng của bạn bằng cách học cách kết hợp querySelector với các phương thức khác!