Các phần tử DOM HTML HTML
Trang này hướng dẫn bạn cách tìm và truy cập các phần tử HTML trong trang HTML.
Tìm các phần tử HTML
Thông thường, với JavaScript, bạn muốn thao tác với các phần tử HTML.
Để làm như vậy, trước tiên bạn phải tìm các phần tử. 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 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"
:
Nếu phần tử được tìm thấy, phương thức sẽ trả về phần tử dưới dạng đối tượng (trong phần tử).
Nếu không tìm thấy phần tử, 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 phần tử <p>
:
Ví dụ này tìm phần tử có id="main"
và sau đó tìm tất cả các phần tử <p>
bên trong "main"
:
Ví dụ
const x = document.getElementById("main");
const y = x.getElementsByTagName("p");
Hãy tự mình thử » Tìm các phần tử HTML theo tên lớp
Nếu bạn muốn tìm tất cả các thành phần HTML có cùng tên lớp, hãy sử dụng getElementsByClassName()
.
Ví dụ này trả về danh sách tất cả các phần tử có class="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 phương thức querySelectorAll()
.
Ví dụ này trả về danh sách tất cả các phần tử <p>
có class="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 có 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ử:
Ví 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;
Hãy tự mình thử »Các đối tượng HTML (và bộ sưu tập đối tượng) sau đây cũng có thể truy cập được:
- tài liệu.anchors
- tài liệu.body
- document.documentElement
- tài liệu.embed
- tài liệu.forms
- tài liệu.head
- tài liệu.hình ảnh
- tài liệu.links
- tài liệu.scripts
- tiêu đề tài liệu