JavaScript HTML DOM yếu tố

Chương này sẽ hướng dẫn bạn cách tìm kiếm và truy cập các phần tử HTML trong trang web HTML.

Tìm kiếm các phần tử HTML

Thường thì, thông qua JavaScript, bạn cần thao tác với các phần tử HTML.

Để đạt được mục đích này, bạn cần trước tiên tìm kiếm các phần tử đó. Có nhiều cách để hoàn thành nhiệm vụ này:

  • Tìm kiếm phần tử HTML thông qua id
  • Tìm kiếm các phần tử HTML thông qua tên thẻ
  • Tìm kiếm phần tử thông qua tên lớp
  • Tìm kiếm các phần tử HTML thông qua bộ lọc CSS chọn
  • Tìm kiếm phần tử HTML thông qua bộ sưu tập đối tượng HTML

Tìm kiếm phần tử HTML thông qua id

Cách đơn giản nhất để tìm kiếm phần tử HTML trong DOM là sử dụng id của phần tử.

Ví dụ này tìm kiếm phần tử có id="intro":

Mẫu

var myElement = document.getElementById("intro");

Thử ngay

Nếu phần tử được tìm thấy, phương pháp này sẽ trả về phần tử dưới dạng đối tượng (trong myElement).

Nếu không tìm thấy phần tử, myElement sẽ chứa null.

Tìm kiếm các phần tử HTML thông qua tên thẻ

Ví dụ này tìm kiếm tất cả <p> Phần tử:

Mẫu

var x = document.getElementsByTagName("p");

Thử ngay

Ví dụ này tìm kiếm phần tử có id="main", sau đó tìm kiếm tất cả các phần tử <p> Phần tử:

Mẫu

var x = document.getElementById("main");
var y = x.getElementsByTagName("p");

Thử ngay

Tìm kiếm phần tử thông qua tên lớp

Nếu bạn cần tìm kiế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ề danh sách các phần tử chứa class="intro":

Mẫu

var x = document.getElementsByClassName("intro");

Thử ngay

Tìm kiếm phần tử thông qua tên lớp không hỗ trợ trên Internet Explorer 8 và các phiên bản sớm hơn.

Tìm kiếm các phần tử HTML thông qua bộ lọc CSS chọn

Nếu bạn cần tìm kiếm tất cả các phần tử HTML khớp với bộ lọc CSS chọn định (id, tên lớp, loại, thuộc tính, giá trị thuộc tính, v.v.), hãy sử dụng querySelectorAll() phương pháp.

Ví dụ này trả về tất cả các phần tử có class="intro" <p> Danh sách các phần tử:

Mẫu

var x = document.querySelectorAll("p.intro");

Thử ngay

querySelectorAll() Chưa hỗ trợ trên Internet Explorer 8 và các phiên bản sớm hơn.

Tìm kiếm đối tượng HTML bằng bộ chọn đối tượng HTML

Ví dụ này tìm kiếm phần tử form có id="frm1", trong bộ sưu tập forms, sau đó hiển thị tất cả các giá trị của các phần tử:

Mẫu

var x = document.forms["frm1"];
var text = "";
 var i;
for (i = 0; i < x.length; i++) {
    text += x.elements[i].value + "<br>";
}
document.getElementById("demo").innerHTML = text;

Thử ngay

Dưới đây là các đối tượng HTML (và bộ sưu tập đối tượng) cũng có thể truy cập được: