Document: phương thức getElementsByClassName()
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
Phương thức getElementsByClassName của giao diện Document trả về một đối tượng giống mảng gồm tất cả các phần tử con có tất cả các tên lớp đã cho.
Khi được gọi trên đối tượng document, toàn bộ tài liệu được tìm kiếm, bao gồm cả nút gốc. Bạn cũng có thể gọi getElementsByClassName() trên bất kỳ phần tử nào; nó sẽ chỉ trả về các phần tử là hậu duệ của phần tử gốc đã chỉ định với (các) tên lớp đã cho.
Warning:
Đây là một HTMLCollection trực tiếp. Các thay đổi trong DOM sẽ được phản ánh trong mảng khi thay đổi xảy ra. Nếu một phần tử được chọn bởi mảng này không còn đủ điều kiện cho bộ chọn, nó sẽ tự động bị loại bỏ. Hãy lưu ý điều này cho mục đích lặp.
Cú pháp
getElementsByClassName(names)
Tham số
names-
Một chuỗi đại diện cho (các) tên lớp cần khớp; nhiều tên lớp được phân tách bằng khoảng trắng.
Giá trị trả về
Một HTMLCollection trực tiếp gồm các phần tử được tìm thấy.
Ví dụ
Lấy tất cả các phần tử có lớp 'test':
document.getElementsByClassName("test");
Lấy tất cả các phần tử có cả hai lớp 'red' và 'test':
document.getElementsByClassName("red test");
Lấy tất cả các phần tử có lớp 'test', bên trong một phần tử có ID là 'main':
document.getElementById("main").getElementsByClassName("test");
Lấy phần tử đầu tiên có lớp 'test', hoặc undefined nếu không có phần tử khớp:
document.getElementsByClassName("test")[0];
Chúng ta cũng có thể sử dụng các phương thức của Array.prototype trên bất kỳ HTMLCollection nào bằng cách truyền HTMLCollection làm giá trị this của phương thức. Ở đây chúng ta sẽ tìm tất cả các phần tử div có lớp 'test':
const testElements = document.getElementsByClassName("test");
const testDivs = Array.prototype.filter.call(
testElements,
(testElement) => testElement.nodeName === "DIV",
);
Lấy phần tử đầu tiên có lớp là 'test'
Đây là phương thức hoạt động được sử dụng phổ biến nhất.
<div id="parent-id">
<p>hello world 1</p>
<p class="test">hello world 2</p>
<p>hello world 3</p>
<p>hello world 4</p>
</div>
const parentDOM = document.getElementById("parent-id");
const test = parentDOM.getElementsByClassName("test"); // một danh sách các phần tử khớp, *không phải* chính phần tử
console.log(test); // HTMLCollection[1]
const testTarget = parentDOM.getElementsByClassName("test")[0]; // phần tử đầu tiên, như chúng ta muốn
console.log(testTarget); // <p class="test">hello world 2</p>
Ví dụ nhiều lớp
document.getElementsByClassName hoạt động rất giống với document.querySelector và document.querySelectorAll. Chỉ các phần tử có TẤT CẢ các tên lớp được chỉ định mới được chọn.
HTML
<span class="orange fruit">Cam trái cây</span>
<span class="orange juice">Nước cam</span>
<span class="apple juice">Nước táo</span>
<span class="foo bar">Cái gì đó ngẫu nhiên</span>
<textarea id="resultArea"></textarea>
JavaScript
// getElementsByClassName chỉ chọn các phần tử có cả hai lớp đã cho
const allOrangeJuiceByClass = document.getElementsByClassName("orange juice");
let result = "document.getElementsByClassName('orange juice')";
for (const el of allOrangeJuiceByClass) {
result += `\n ${el.textContent}`;
}
// querySelector chỉ chọn các khớp đầy đủ hoàn chỉnh
const allOrangeJuiceQuery = document.querySelectorAll(".orange.juice");
result += "\n\ndocument.querySelectorAll('.orange.juice')";
for (const el of allOrangeJuiceQuery) {
result += `\n ${el.textContent}`;
}
document.getElementById("resultArea").value = result;
Kết quả
Đặc tả kỹ thuật
| Thông số kỹ thuật |
|---|
| DOM # ref-for-dom-document-getelementsbyclassname① |