JavaScript HTML Phần tử DOM
Trang này hướng dẫn bạn cách tìm và truy cập các phần tử HTML trong một trang HTML.
Tìm các phần tử HTML
Thông thường, với JavaScript, bạn muốn thao tác các phần tử HTML.
Để làm như vậy, bạn phải tìm các yếu tố đầu tiên. Có nhiều hướng khác nhau để làm điều đó:
- Tìm các phần tử HTML theo id
- Tìm các phần tử HTML theo tên thẻ
- Tìm các phần tử HTML theo tên lớp
- Tìm các phần tử HTML bằng bộ chọn CSS
- Tìm các phần tử HTML bằng các bộ sưu tập đối tượng HTML
Tìm phần tử HTML theo Id
Cách dễ nhất để tìm một phần tử HTML trong DOM là sử dụng id phần tử.
Ví dụ này tìm phần tử có id="intro"
:
Thí dụ
const element = document.getElementById("intro");
Nếu phần tử được tìm thấy, phương thức sẽ trả về phần tử dưới dạng một đối tượng (trong phần tử).
Nếu phần tử không được tìm thấy, phần tử sẽ chứa null
.
Tìm các phần tử HTML theo tên thẻ
Ví dụ này tìm thấy tất cả các <p>
phần tử:
Thí dụ
const element = document.getElementsByTagName("p");
Ví dụ này tìm phần tử với id="main"
, sau đó tìm tất cả các <p>
phần tử bên trong "main"
:
Thí dụ
const x = document.getElementById("main");
const y = x.getElementsByTagName("p");
Tìm phần tử HTML theo tên lớp
Nếu bạn muốn tìm tất cả các phần tử HTML có cùng tên lớp, hãy sử dụng
getElementsByClassName()
.
Ví dụ này trả về một danh sách tất cả các phần tử với class="intro"
.
Thí dụ
const x = document.getElementsByClassName("intro");
Tìm các phần tử HTML bằng Bộ chọn CSS
Nếu bạn muốn tìm tất cả các phần tử HTML khớp với một bộ chọn CSS được chỉ định (id, tên lớp, loại, thuộc tính, giá trị của thuộc tính, v.v.), hãy sử dụng querySelectorAll()
phương pháp này.
Ví dụ này trả về một danh sách tất cả các <p>
phần tử với class="intro"
.
Thí dụ
const x = document.querySelectorAll("p.intro");
Tìm các phần tử HTML bằng Bộ sưu tập đối tượng HTML
Ví dụ này tìm phần tử biểu mẫu với id="frm1"
, trong bộ sưu tập biểu mẫu và hiển thị tất cả các giá trị phần tử:
Thí dụ
const x = document.forms["frm1"];
let text = "";
for (let i = 0; i < x.length; i++) {
text += x.elements[i].value + "<br>";
}
document.getElementById("demo").innerHTML = text;
Các đối tượng HTML sau (và bộ sưu tập đối tượng) cũng có thể truy cập được: