GetElementById, getElementsByClassName, getElementsByTagName và querySelector Trong JavaScript

Sự Khác Biệt Giữa getElementById, getElementsByClassName, getElementsByTagName và querySelector Trong JavaScript

Trong JavaScript, có nhiều phương thức để truy cập và thao tác với các phần tử trong Document Object Model (DOM). Bốn phương thức phổ biến nhất là getElementById, getElementsByClassName, getElementsByTagName, và querySelector. Dưới đây là sự khác biệt giữa chúng:

1. getElementById

Đặc Điểm

• Trả Về: Một phần tử duy nhất (Element) có ID khớp với tham số được cung cấp.
• Tham Số: Một chuỗi chứa ID của phần tử muốn truy cập.
• Phạm Vi: Chỉ tìm trong phạm vi toàn bộ tài liệu.

Ví Dụ

<div id="myDiv">Hello World</div>
<script>
  var element = document.getElementById("myDiv");
  console.log(element.textContent);  // Output: Hello World
</script>

2. getElementsByClassName

Đặc Điểm

• Trả Về: Một HTMLCollection (giống như một mảng) chứa tất cả các phần tử có class khớp với tham số được cung cấp.
• Tham Số: Một chuỗi chứa tên class của các phần tử muốn truy cập.
• Phạm Vi: Chỉ tìm trong phạm vi toàn bộ tài liệu hoặc một phần tử cụ thể.

Ví Dụ

<div class="myClass">Hello</div>
<div class="myClass">World</div>
<script>
  var elements = document.getElementsByClassName("myClass");
  console.log(elements.length);  // Output: 2
  console.log(elements[0].textContent);  // Output: Hello
</script>

3. getElementsByTagName

Đặc Điểm

• Trả Về: Một HTMLCollection chứa tất cả các phần tử có tên thẻ khớp với tham số được cung cấp.
• Tham Số: Một chuỗi chứa tên thẻ của các phần tử muốn truy cập.
• Phạm Vi: Chỉ tìm trong phạm vi toàn bộ tài liệu hoặc một phần tử cụ thể.

Ví Dụ

<p>Paragraph 1</p>
<p>Paragraph 2</p>
<script>
  var elements = document.getElementsByTagName("p");
  console.log(elements.length);  // Output: 2
  console.log(elements[0].textContent);  // Output: Paragraph 1
</script>

4. querySelector

Đặc Điểm

• Trả Về: Phần tử đầu tiên (Element) trong tài liệu khớp với bộ chọn CSS được cung cấp.
• Tham Số: Một chuỗi chứa bộ chọn CSS (CSS selector).
• Phạm Vi: Chỉ tìm trong phạm vi toàn bộ tài liệu hoặc một phần tử cụ thể.

Ví Dụ

<div class="myClass" id="myDiv">Hello World</div>
<script>
  var element = document.querySelector("#myDiv");
  console.log(element.textContent);  // Output: Hello World
</script>

5. querySelectorAll

Đặc Điểm

• Trả Về: Một NodeList (giống như một mảng) chứa tất cả các phần tử khớp với bộ chọn CSS được cung cấp.
• Tham Số: Một chuỗi chứa bộ chọn CSS (CSS selector).
• Phạm Vi: Chỉ tìm trong phạm vi toàn bộ tài liệu hoặc một phần tử cụ thể.

Ví Dụ

<div class="myClass">Hello</div>
<div class="myClass">World</div>
<script>
  var elements = document.querySelectorAll(".myClass");
  console.log(elements.length);  // Output: 2
  console.log(elements[0].textContent);  // Output: Hello
</script>

Tổng Kết

Mỗi phương thức có mục đích và trường hợp sử dụng riêng của nó. Hiểu rõ sự khác biệt giữa chúng sẽ giúp bạn lựa chọn phương thức phù hợp nhất cho nhu cầu truy cập và thao tác với DOM của bạn.