×

Làm việc với DOM sử dụng getElementById và querySelector

Avatar of admin
admin 1 Views

Khi làm việc với JavaScript để tương tác và thao tác cây tài liệu (Document Object Model - DOM) của một trang web, có một số phương pháp và công cụ phổ biến được sử dụng để truy cập và thay đổi các phần tử HTML. Hai trong số những phương pháp mạnh mẽ đó là getElementById và querySelector. Bài viết này hướng dẫn bạn cách sử dụng cả hai phương pháp này một cách hiệu quả.

getElementById

Phương pháp getElementById là một trong những cách phổ biến nhất để truy cập một phần tử duy nhất trong DOM bằng thuộc tính id. Đây là cách sử dụng đơn giản và rất hiệu quả bởi vì id là duy nhất trên mỗi trang.

Cú pháp:

var element = document.getElementById('id-cua-phan-tu');

Ví dụ:

Giả sử bạn có một phần tử HTML như sau:

<div id="myElement">Nội dung của phần tử</div>

Bạn có thể truy cập vào phần tử này bằng JavaScript và thay đổi nội dung của nó:

var element = document.getElementById('myElement');
element.innerHTML = 'Nội dung mới của phần tử';

Trong ví dụ này, phương pháp getElementById truy cập phần tử với id là "myElement" và thay đổi nội dung thành "Nội dung mới của phần tử".

querySelector

Phương pháp querySelector cho phép bạn sử dụng các bộ chọn CSS để truy cập phần tử. Điều này mang lại nhiều sự linh hoạt hơn so với getElementById, đặc biệt khi bạn cần truy cập phần tử không có id hoặc khi bạn muốn sử dụng các bộ chọn phức tạp.

Cú pháp:

var element = document.querySelector('css-selector');

Ví dụ:

Giả sử bạn có các phần tử HTML như sau:

<div class="container">
    <div class="item">Phần tử 1</div>
    <div class="item">Phần tử 2</div>
</div>

Để truy cập và thay đổi nội dung của phần tử đầu tiên với lớp "item":

var element = document.querySelector('.container .item');
element.innerHTML = 'Nội dung mới của phần tử 1';

Trong ví dụ này, querySelector sẽ chọn phần tử đầu tiên thỏa mãn bộ chọn .container .item.

So sánh và cách sử dụng

Ưu điểm của getElementById:

  • Hiệu suất: Truy cập nhanh chóng và hiệu quả, vì id là duy nhất.
  • Đơn giản: Dễ sử dụng và hiểu, phù hợp với các thao tác cơ bản.

Hạn chế của getElementById:

  • Không linh hoạt: Chỉ có thể sử dụng cho các phần tử có id.

Ưu điểm của querySelector:

  • Linh hoạt: Cho phép sử dụng các bộ chọn phức tạp và CSS selector.
  • Đa dạng: Có thể sử dụng cho nhiều loại truy vấn khác nhau, bao gồm lớp, thẻ, và các bộ chọn phức tạp.

Hạn chế của querySelector:

  • Hiệu suất: Có thể chậm hơn so với getElementById khi truy vấn phức tạp.

Kết luận

Việc lựa chọn giữa getElementById và querySelector phụ thuộc vào nhu cầu cụ thể của dự án và cấu trúc HTML của bạn. Nếu bạn cần truy cập một phần tử duy nhất với id, getElementById là lựa chọn phù hợp. Nếu bạn cần truy cập phần tử bằng các bộ chọn phức tạp hơn hoặc không có id, querySelector sẽ là công cụ tối ưu.

Sử dụng linh hoạt cả hai phương pháp này sẽ giúp bạn tương tác và kiểm soát DOM một cách hiệu quả, tạo ra các trang web tương tác và động hơn.

Comments

Bài viết liên quan