Phương thức getElementsByTagName() của HTML DOM Document

Định nghĩa và cách sử dụng

getElementsByTagName() Phương thức trả về bộ sưu tập các yếu tố có tên thẻ được chỉ định.

getElementsByTagName() Phương thức trả về HTMLCollection.

getElementsByTagName() Thuộc tính này là chỉ đọc.

Ghi chú:getElementsByTagName("*") Trả về tất cả các yếu tố trong tài liệu.

HTMLCollection

HTMLCollection Là bộ sưu tập类似 mảng của các yếu tố HTML (danh sách).

Có thể truy cập các yếu tố trong bộ sưu tập bằng chỉ số (bắt đầu từ 0).

length Thuộc tính trả về số lượng yếu tố trong bộ sưu tập.

Xin xem thêm:

Phương thức getElementById()

Phương thức getElementsByClassName()

Phương thức querySelector()

Phương thức querySelectorAll()

Đối tượng HTMLCollection

Mô hình

Ví dụ 1

Lấy tất cả các yếu tố có tên thẻ "li":

const collection = document.getElementsByTagName("li");

Thử ngay

Ví dụ 2

Lấy tất cả các yếu tố trong tài liệu:

const collection = document.getElementsByTagName("*");

Thử ngay

Ví dụ 3

Thay đổi nội dung HTML bên trong yếu tố <p> đầu tiên của tài liệu:

document.getElementsByTagName("p")[0].innerHTML = "Hello World!";

Thử ngay

Ví dụ 4

Số lượng yếu tố <li> trong tài liệu:

let numb = document.getElementsByTagName("li").length;

Thử ngay

Ví dụ 5

Thay đổi màu nền cho tất cả các yếu tố <p>:

const collection = document.getElementsByTagName("P");
for (let i = 0; i < collection.length; i++) {
  collection[i].style.backgroundColor = "red";
}

Thử ngay

Cú pháp

document.getElementsByTagName(tagName)

Tham số

Tham số Mô tả
tagName Bắt buộc. Tên thẻ của phần tử.

Giá trị trả về

Loại Mô tả
Đối tượng

Đối tượng HTMLCollection.

Bộ sưu tập các phần tử có tên thẻ cụ thể.

Sắp xếp theo thứ tự xuất hiện của phần tử trong tài liệu.

Chi tiết kỹ thuật

Phương thức này sẽ trả về đối tượng NodeList (có thể xử lý như mảng chỉ đọc), đối tượng này chứa tất cả các phần tử Element có tên thẻ cụ thể trong tài liệu, chúng được lưu trữ theo thứ tự xuất hiện trong tài liệu nguồn.

Đối tượng NodeList là “sống”, tức là nếu thêm hoặc xóa các phần tử có tên thẻ cụ thể trong tài liệu, nội dung của nó sẽ tự động cập nhật cần thiết.

Tài liệu HTML không phân biệt viết hoa/thuộc tính, vì vậy bạn có thể sử dụng bất kỳ hình thức viết hoa/thuộc tính nào. tagNameNó sẽ khớp với tất cả các thẻ có cùng tên trong tài liệu, bất kể hình thức viết hoa/thuộc tính của chúng trong tài liệu nguồn là gì. Nhưng tài liệu XML phân biệt viết hoa/thuộc tính.tagName Chỉ khớp với các thẻ có tên và hình thức viết hoa/thuộc tính hoàn toàn giống nhau trong tài liệu nguồn.

Lưu ý:Giao diện Element định nghĩa một phương thức cùng tên, phương thức này chỉ tìm kiếm trong cây tài liệu. Ngoài ra, giao diện HTMLDocument định nghĩa Phương thức getElementByName()Nó dựa trên giá trị thuộc tính name (không phải là tên thẻ).

Hỗ trợ trình duyệt

document.getElementsByTagName() Là tính năng DOM Level 1 (1998).

Tất cả các trình duyệt đều hỗ trợ nó:

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Hỗ trợ 9-11 Hỗ trợ Hỗ trợ Hỗ trợ Hỗ trợ

Trang liên quan

Tài liệu tham khảo JavaScript:element.getElementsByTagName()

Giáo trình JavaScript:Danh sách nút HTML DOM của JavaScript