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

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

getElementsByTagName() Phương thức trả về tập hợp các phần tử con có tên thẻ cụ thể, dưới dạng đối tượng NodeList.

Lưu ý:Giá trị tham số "*" Trả về tất cả các phần tử con của một phần tử.

Xem thêm:

Phương thức getElementsByClassName()

Phương thức querySelector()

Phương thức querySelectorAll()

NodeList

NodeList Là tập hợp các nút tương tự như mảng (danh sách).

Bạn có thể truy cập các phần tử trong danh sách bằng cách sử dụng chỉ số (biểu thức). Chỉ số bắt đầu từ 0.

Thuộc tính lengthTrả về số lượng phần tử trong danh sách.

Mô hình

Ví dụ 1

Thay đổi nội dung HTML của phần tử <li> đầu tiên trong danh sách:

const list = document.getElementsByTagName("UL")[0];
list.getElementsByTagName("li")[0].innerHTML = "Milk";

Thử ngay

Ví dụ 2

Số lượng phần tử <p> trong "myDIV":

const element = document.getElementById("myDIV");
const nodes = element.getElementsByTagName("p");
let numb = nodes.length;

Thử ngay

Ví dụ 3

Thay đổi kích thước font của phần tử <p> thứ hai trong "myDIV":

const element = document.getElementById("myDIV");
element.getElementsByTagName("p")[1].style.fontSize = "24px";

Thử ngay

Ví dụ 4

Thay đổi màu nền của tất cả các phần tử <p> trong "myDIV":

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

Thử ngay

Ví dụ 5

Thay đổi màu nền của phần tử thứ tư (索引 3) trong "myDIV":

const div = document.getElementById("myDIV");
div.getElementsByTagName("*")[3].style.backgroundColor = "red";

Thử ngay

Ví dụ 6

Sử dụng tham số "*" để thay đổi màu nền của tất cả các phần tử trong "myDIV":

const div = document.getElementById("myDIV");
const nodes = div.getElementsByTagName("*");
for (let i = 0; i < nodes.length; i++) {
  nodes[i].style.backgroundColor = "red";
}

Thử ngay

Cú pháp

element.getElementsByTagName(tagname)

Tham số

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

Giá trị trả về

Loại Mô tả
NodeList

Các phần tử con của phần tử có tên thẻ cụ thể.

Các phần tử được sắp xếp theo thứ tự xuất hiện trong mã nguồn.

Chi tiết kỹ thuật

getElementsByTagName() Phương thức sẽ duyệt qua các phần tử con của phần tử được chỉ định, trả về một mảng chứa các phần tử Element (thực chất là đối tượng NodeList), biểu thị tất cả các phần tử tài liệu có tên thẻ cụ thể. Thứ tự của phần tử trong mảng là thứ tự chúng xuất hiện trong mã nguồn tài liệu.

Lưu ý

Giao diện Documentcũng định nghĩa Phương thức getElementsByTagName()Nó tương tự như phương thức này, nhưng duyệt qua toàn bộ tài liệu,而不是 duyệt qua các phần tử con của một phần tử nào đó.

Đừng nhầm lẫn phương thức này với Phương thức getElementsByName() của HTMLDocument Trộn lẫn,后者 dựa trên giá trị thuộc tính name của phần tử để tìm kiếm phần tử,而不是 dựa trên tên thẻ của chúng.

Hỗ trợ trình duyệt

Tất cả các trình duyệt đều hỗ trợ element.getElementsByTagName()：

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Hỗ trợ Hỗ trợ Hỗ trợ Hỗ trợ Hỗ trợ Hỗ trợ