×

Cách Chọn Một Phần Tử Trong DOM Bằng JavaScript

Avatar of luongtu
luongtu 0 Views

Để thao tác với các phần tử trong Document Object Model (DOM), bạn cần biết cách chọn các phần tử này. JavaScript cung cấp nhiều phương thức khác nhau để truy cập và chọn các phần tử trong DOM. Dưới đây là hướng dẫn chi tiết về cách chọn phần tử bằng các phương thức phổ biến.

1. getElementById

Phương thức getElementById được sử dụng để chọn một phần tử duy nhất dựa trên thuộc tính ID của nó.

Cú Pháp

document.getElementById(id);

Ví Dụ

<!DOCTYPE html>
<html>
<head>
  <title>getElementById Example</title>
</head>
<body>
  <div id="myDiv">Hello World</div>
  <script>
    var element = document.getElementById("myDiv");
    console.log(element.textContent);  // Output: Hello World
  </script>
</body>
</html>

2. getElementsByClassName

Phương thức getElementsByClassName trả về một HTMLCollection chứa tất cả các phần tử có class khớp với tham số được cung cấp.

Cú Pháp

document.getElementsByClassName(className);

Ví Dụ

<!DOCTYPE html>
<html>
<head>
  <title>getElementsByClassName Example</title>
</head>
<body>
  <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>
</body>
</html>

3. getElementsByTagName

Phương thức getElementsByTagName 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.

Cú Pháp

document.getElementsByTagName(tagName);

Ví Dụ

<!DOCTYPE html>
<html>
<head>
  <title>getElementsByTagName Example</title>
</head>
<body>
  <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>
</body>
</html>

4. querySelector

Phương thức querySelector trả về phần tử đầu tiên khớp với bộ chọn CSS được cung cấp.

Cú Pháp

document.querySelector(selector);

Ví Dụ

<!DOCTYPE html>
<html>
<head>
  <title>querySelector Example</title>
</head>
<body>
  <div class="myClass" id="myDiv">Hello World</div>
  <script>
    var element = document.querySelector("#myDiv");
    console.log(element.textContent);  // Output: Hello World
  </script>
</body>
</html>

5. querySelectorAll

Phương thức querySelectorAll trả về một NodeList chứa tất cả các phần tử khớp với bộ chọn CSS được cung cấp.

Cú Pháp

document.querySelectorAll(selector);

Ví Dụ

<!DOCTYPE html>
<html>
<head>
  <title>querySelectorAll Example</title>
</head>
<body>
  <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>
</body>
</html>

Tổng Kết

Phương Thức Trả Về Tham Số Ghi Chú
getElementById Một phần tử ID của phần tử Tìm theo ID duy nhất
getElementsByClassName HTMLCollection Tên class Tìm theo class, trả về nhiều phần tử
getElementsByTagName HTMLCollection Tên thẻ Tìm theo tên thẻ, trả về nhiều phần tử
querySelector Một phần tử Bộ chọn CSS Tìm theo bộ chọn CSS, trả về phần tử đầu tiên
querySelectorAll NodeList Bộ chọn CSS Tìm theo bộ chọn CSS, trả về tất cả phần tử khớp

Hiểu và sử dụng đúng các phương thức này sẽ giúp bạn dễ dàng chọn và thao tác với các phần tử trong DOM, từ đó tạo ra các trang web động và tương tác hơn.

Comments

Bài viết liên quan