Các phần tử HTML DOM trong JavaScript

Tìm 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 phần tử đầu tiên. Có một vài cách để làm điều này:

• Tìm các phần tử HTML bằng 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 trình 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 thấy phần tử với id = “intro”:

var myElement = document.getElementById(“intro”);

Nếu phần tử được tìm thấy, phương thức sẽ trả về phần tử như một đối tượng (trong myElement). Nếu phần tử không được tìm thấy, myElement sẽ chứa null.

Tìm các phần tử HTML theo tên tag

Ví dụ này tìm tất cả các phần tử <p>:

var x = document.getElementsByTagName(“p”);

Ví dụ này tìm phần tử với id = “main”, và sau đó tìm tất cả các phần tử <p> bên trong “main”:

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

Tìm các phần tử HTML theo tên class

Nếu bạn muốn tìm tất cả các phần tử HTML có cùng tên class, 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”.

var x = document.getElementsByClassName(“intro”);

Tìm các phần tử theo tên class không hoạt động trong Internet Explorer 8 và các phiên bản trước đó.

Tìm các phần tử HTML bởi bộ chọn CSS

Nếu bạn muốn tìm tất cả các phần tử HTML phù hợp với một bộ chọn CSS cụ thể (id, tên lớp, các loại, thuộc tính, giá trị thuộc tính, v.v.), hãy sử dụng phương thức querySelectorAll(). Ví dụ này trả về một danh sách tất cả các phần tử <p> với class = “intro”.

var x = document.querySelectorAll(“p.intro”);

Phương thức querySelectorAll() không hoạt động trong Internet Explorer 8 và các phiên bản trước đó.

Tìm phần tử HTML theo bộ sưu tập đối tượng HTML

Ví dụ này tìm phần tử form 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ử:

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;

Các đối tượng HTML sau (và bộ sưu tập đối tượng) cũng có thể truy cập được:

• document.anchors
• document.body
• document.documentElement
• document.embeds
• document.forms
• document.head
• document.images
• document.links
• document.scripts
• document.title