querySelector trong JavaScript: Hướng dẫn toàn tập kèm ví dụ

Khi làm việc với JavaScript, việc chọn đúng phần tử DOM là bước đầu tiên và quan trọng nhất. Phương thức querySelector ra đời như một công cụ vạn năng, giúp bạn truy vấn mọi phần tử một cách linh hoạt và chính xác. Trong bài viết này, WiWeb sẽ cùng bạn tìm hiểu toàn tập về querySelector, từ cú pháp cơ bản đến các ví dụ thực tế và so sánh chi tiết với các phương thức khác. Hãy bắt đầu ngay thôi!

querySelector là gì và được sử dụng để làm gì?

Trong quá trình thao tác với DOM (Document Object Model), việc “bắt” được đúng phần tử bạn muốn là cực kỳ quan trọng. Đây chính là lúc querySelector tỏa sáng. Nó là một phương thức mạnh mẽ giúp bạn tìm kiếm và chọn các phần tử HTML trên trang web của mình.

Định nghĩa: Phương thức vạn năng để truy vấn DOM

document.querySelector() là một phương thức của đối tượng document. Nó trả về phần tử đầu tiên bên trong tài liệu khớp với một hoặc nhiều bộ chọn CSS (CSS selectors) được chỉ định. Bạn có thể coi nó như một người tìm kiếm thông minh. Bạn đưa cho nó một “bản mô tả” (bộ chọn CSS), và nó sẽ trả về cho bạn phần tử đầu tiên khớp với mô tả đó.

Điểm mạnh nhất của querySelector chính là sự linh hoạt. Vì nó sử dụng cú pháp CSS selector, bạn có thể chọn phần tử theo ID, class, tên thẻ, thuộc tính, hoặc thậm chí là các kết hợp phức tạp. Điều này giúp việc DOM manipulation trở nên dễ dàng và trực quan hơn rất nhiều.

Cú pháp cơ bản và tham số đầu vào

Cú pháp của phương thức này rất đơn giản và dễ nhớ. Bạn sẽ thấy nó quen thuộc ngay nếu đã từng viết CSS.

let element = document.querySelector(selectors);

Trong đó:

• element là biến sẽ lưu trữ phần tử tìm thấy (hoặc null nếu không tìm thấy).
• selectors là một chuỗi (string) chứa một hoặc nhiều bộ chọn CSS. Ví dụ: '#main-title', '.nav-item', 'div p'.

Hướng dẫn sử dụng querySelector với các ví dụ thực tế

Lý thuyết là vậy, nhưng cách tốt nhất để hiểu querySelector là qua các ví dụ thực tế. Hãy cùng WiWeb xem qua một vài trường hợp sử dụng phổ biến nhất nhé. Giả sử chúng ta có đoạn HTML sau:

<div id="app-container" class="container main">
    <h1 id="main-title">Chào mừng bạn!</h1>
    <p class="content-text">Đây là một ví dụ về querySelector.</p>
    <p class="content-text">Một đoạn văn bản khác.</p>
    <input type="text" name="username" placeholder="Nhập tên">
</div>

Chọn phần tử theo ID

Để chọn một phần tử có ID cụ thể, bạn sử dụng ký tự # giống như trong CSS. Đây là cách sử dụng document.querySelector by id.

// Chọn thẻ h1 có id là 'main-title'
const titleElement = document.querySelector('#main-title');
console.log(titleElement.textContent); // Kết quả: "Chào mừng bạn!"

Chọn phần tử theo Class

Để chọn phần tử theo class, bạn dùng ký tự . (dấu chấm). Lưu ý quan trọng: querySelector sẽ chỉ trả về phần tử đầu tiên nó tìm thấy có class đó.

// Chọn phần tử p đầu tiên có class là 'content-text'
const firstParagraph = document.querySelector('.content-text');
console.log(firstParagraph.textContent); // Kết quả: "Đây là một ví dụ về querySelector."

Chọn phần tử theo Tên thẻ (Tag Name)

Bạn cũng có thể chọn phần tử dựa trên tên thẻ HTML của nó. Cách này cũng chỉ trả về phần tử đầu tiên khớp.

// Chọn thẻ input đầu tiên trên trang
const inputElement = document.querySelector('input');
console.log(inputElement.placeholder); // Kết quả: "Nhập tên"

Chọn phần tử theo Thuộc tính (Attribute)

Đây là một trong những tính năng mạnh mẽ của querySelector. Bạn có thể chọn phần tử dựa trên thuộc tính và giá trị của nó bằng cách sử dụng dấu ngoặc vuông [].

// Chọn thẻ input có thuộc tính name là 'username'
const usernameInput = document.querySelector('input[name="username"]');
console.log(usernameInput.type); // Kết quả: "text"

Kết hợp các bộ chọn CSS (CSS Selector) phức tạp

Sức mạnh thực sự của javascript queryselector được thể hiện khi bạn kết hợp các bộ chọn. Bạn có thể sử dụng gần như mọi css selectors phức tạp mà bạn biết.

// Chọn thẻ p có class 'content-text' nằm bên trong div có id 'app-container'
const specificParagraph = document.querySelector('#app-container .content-text');
console.log(specificParagraph.textContent); // Kết quả: "Đây là một ví dụ về querySelector."

Cách này cực kỳ hữu ích khi bạn cần chọn các phần tử lồng nhau một cách chính xác. Thật tiện lợi phải không nào?

Giá trị trả về: Xử lý Element và null

Hiểu rõ querySelector trả về gì là chìa khóa để viết code không lỗi. Giá trị trả về của nó có thể là một trong hai trường hợp: một đối tượng Element hoặc null.

Khi tìm thấy: querySelector trả về phần tử đầu tiên

Nếu có ít nhất một phần tử khớp với bộ chọn bạn cung cấp, querySelector sẽ trả về đối tượng Element đầu tiên nó tìm thấy. Đối tượng này đại diện cho thẻ HTML đó trong cây DOM. Bạn có thể dùng nó để thay đổi nội dung, kiểu dáng, thuộc tính và nhiều thứ khác.

const container = document.querySelector('.container');
// container là một đối tượng Element
container.style.backgroundColor = 'lightblue'; // Thay đổi màu nền

Khi không tìm thấy: querySelector trả về null

Đây là một điểm cực kỳ quan trọng. Nếu không có phần tử nào trên trang khớp với bộ chọn của bạn, querySelector sẽ trả về giá trị null.

Nếu bạn cố gắng thao tác trên một giá trị null (ví dụ: null.textContent), JavaScript sẽ báo lỗi và dừng chương trình. Do đó, một thói quen tốt là luôn kiểm tra xem kết quả có phải null hay không trước khi sử dụng.

const nonExistentElement = document.querySelector('.this-class-does-not-exist');

if (nonExistentElement) {
  // Khối code này sẽ không bao giờ chạy
  nonExistentElement.textContent = 'Hello'; 
} else {
  console.log('Không tìm thấy phần tử!');
}

Làm thế nào để lấy giá trị từ phần tử được chọn?

Khi bạn đã có đối tượng Element, bạn có thể truy cập các thuộc tính của nó để lấy thông tin. Một vài thuộc tính phổ biến bao gồm:

• .textContent: Lấy hoặc thiết lập nội dung văn bản của phần tử.
• .innerHTML: Lấy hoặc thiết lập toàn bộ nội dung HTML bên trong phần tử.
• .value: Lấy hoặc thiết lập giá trị của các phần tử input, select, textarea.
• .getAttribute('attribute-name'): Lấy giá trị của một thuộc tính cụ thể.

So sánh chi tiết: querySelector vs các phương thức khác

JavaScript cung cấp nhiều cách để chọn phần tử DOM. Việc hiểu rõ sự khác biệt sẽ giúp bạn chọn đúng công cụ cho từng công việc. Hãy cùng WiWeb so sánh querySelector với những người anh em của nó nhé.

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

Đây là cặp đôi thường gây nhầm lẫn nhất. Sự khác biệt cốt lõi nằm ở số lượng phần tử chúng trả về.

• querySelector: Chỉ trả về một phần tử (phần tử đầu tiên tìm thấy) hoặc null.
• querySelectorAll: Trả về tất cả các phần tử khớp với bộ chọn, dưới dạng một NodeList tĩnh. Bạn có thể lặp qua NodeList này giống như một mảng.

// Chỉ lấy p đầu tiên
const firstP = document.querySelector('.content-text'); 

// Lấy tất cả các thẻ p có class 'content-text'
const allPs = document.querySelectorAll('.content-text');

allPs.forEach(p => {
  console.log(p.textContent);
});

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

Cả hai đều có thể chọn phần tử theo ID, nhưng chúng có những điểm khác biệt quan trọng.

• Hiệu suất: getElementById('id') thường nhanh hơn một chút so với querySelector('#id') vì nó được tối ưu hóa cho một tác vụ duy nhất.
• Tính linh hoạt: Đây là ưu điểm của querySelector. Nó có thể chọn theo ID, class, thuộc tính và nhiều hơn nữa, trong khi getElementById chỉ làm việc với ID.

Lời khuyên: Nếu bạn chỉ cần chọn một phần tử bằng ID và hiệu suất là ưu tiên hàng đầu, hãy dùng getElementById. Trong hầu hết các trường hợp khác, querySelector là lựa chọn linh hoạt hơn.

So sánh với getElementsByClassName và getElementsByTagName

Các phương thức cũ hơn này cũng có những đặc điểm riêng:

• Giá trị trả về: Cả hai đều trả về một HTMLCollection động (live collection). Điều này có nghĩa là nếu bạn thêm hoặc xóa các phần tử khớp khỏi DOM, HTMLCollection sẽ tự động cập nhật. Ngược lại, querySelectorAll trả về một NodeList tĩnh (static list).
• Tính linh hoạt: Tương tự như trên, getElementsByClassName và getElementsByTagName bị giới hạn trong việc chỉ chọn theo class hoặc tên thẻ. querySelector và querySelectorAll cho phép các bộ chọn CSS phức tạp hơn nhiều.

Khả năng tương thích trình duyệt (Browser Compatibility)

Tin vui cho các bạn lập trình viên là querySelector và querySelectorAll được hỗ trợ rất tốt. Chúng đã trở thành một tiêu chuẩn web trong nhiều năm.

Bạn có thể yên tâm sử dụng chúng trên tất cả các trình duyệt hiện đại, bao gồm:

• Google Chrome
• Mozilla Firefox
• Microsoft Edge
• Safari

Ngay cả các phiên bản trình duyệt cũ hơn như Internet Explorer 8 cũng đã hỗ trợ các phương thức này. Vì vậy, bạn gần như không cần phải lo lắng về vấn đề tương thích khi sử dụng querySelector trong các dự án của mình.

Lời kết

querySelector là một công cụ cực kỳ mạnh mẽ và linh hoạt cho việc thao tác DOM trong JavaScript. Nó đơn giản hóa việc chọn các phần tử phức tạp nhờ vào sức mạnh của các bộ chọn CSS.

Vậy khi nào bạn nên ưu tiên sử dụng nó?

• Khi bạn cần chọn phần tử đầu tiên khớp với một bộ chọn phức tạp (ví dụ: nav > ul > li).
• Khi bạn muốn có một cú pháp nhất quán để chọn phần tử theo ID, class, hoặc thuộc tính.
• Khi bạn cần sự đơn giản và dễ đọc trong code của mình.

Trong khi getElementById vẫn là lựa chọn tối ưu về tốc độ cho việc chọn theo ID, querySelector và querySelectorAll cung cấp sự linh hoạt vượt trội, khiến chúng trở thành lựa chọn hàng đầu trong lập trình JavaScript hiện đại.

Bạn có thấy querySelector hữu ích trong các dự án của mình không? Hãy chia sẻ kinh nghiệm của bạn ở phần bình luận nhé!

Nếu bạn đang tìm kiếm một đơn vị thiết kế website chuyên nghiệp để áp dụng những kỹ thuật hiện đại này, WiWeb luôn sẵn sàng đồng hành cùng bạn. Liên hệ với chúng tôi để được tư vấn nhé!