Phương thức getElementsByClassName[]
trả về một tập hợp tất cả các phần tử trong tài liệu với tên lớp được chỉ định, giá trị trả về như một đối tượng NodeList
.
Đối tượng NodeList
này là một HTMLCollection
đại diện cho một tập hợp các nút. Các nút có thể được truy cập bằng số chỉ mục. Chỉ số bắt đầu bằng 0.
Mẹo: Bạn có thể sử dụng thuộc tính length
của đối tượng NodeList
để xác định số phần tử có tên lớp được chỉ định, sau đó bạn có thể lặp qua tất cả các
phần tử và trích xuất thông tin bạn muốn.
Cú pháp
var elements = document.getElementsByClassName[class_names]; // or: var elements = rootElement.getElementsByClassName[class_names];
elements
là một mảng các phần tử được tìm thấy.
class_names
là một chuỗi đại diện cho danh sách các tên lớp để so sánh; tên lớp được phân tách bằng khoảng trắng
getElementsByClassName
có thể được gọi trên bất kỳ phần tử nào, không phải chỉ trên đối tượng document
. Phần tử mà phương thức này được gọi sẽ được sử dụng làm gốc của tìm kiếm.
Ví dụ
Lấy tất cả các phần tử có chứa 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
, nằm bên trong phần tử có ID main
document.getElementById["main"].getElementsByClassName["test"];
Tìm xem có bao nhiêu phần tử với class="example"
có trong document
[sử dụng thuộc tính length
của đối tượng NodeList
]:
var x = document.getElementsByClassName["example"].length;
Thay đổi màu nền của tất cả các phần tử có class = "example":
var x = document.getElementsByClassName["example"]; var i; for [i = 0; i < x.length; i++] { x[i].style.backgroundColor = "red"; }
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 chuyển HTMLCollection
làm giá trị của phương thức này. Ở đây chúng ta sẽ
tìm thấy tất cả các phần tử div
có một lớp test
:
var testElements = document.getElementsByClassName["test"]; var testDivs = Array.prototype.filter.call[testElements, function[testElement]{ return testElement.nodeName === "DIV"; }];
Documentvar parentDOM = document.getElementById["parent-id"]; var test=parentDOM.getElementsByClassName["test"]; //test is not target element console.log[test]; //HTMLCollection[1] var testTarget=parentDOM.getElementsByClassName["test"][0]; //here , this element is target console.log[testTarget]; //hello word1
hello word2
hello word3
hello word4
hello word2
Tính tương thích của trình duyệt web
Trình duyệt trên máy tính
Trình duyệt | Tương thích |
Chrome | Có |
Edge | Có |
FireFox | Từ version 4.0 |
Internet Eplorer | Từ version 9 |
Opera | Có |
Safari | Có |
Trình duyệt trên thiết bị di động
Trình duyệt | Tương thích |
Android Webview | Có |
Chrome for Android | Có |
Edge Mobile | Có |
FireFox for Android | Từ version 4.0 |
Opera | Có |
iOS Safari | Có |
Samsung Internet | ? |
Tham khảo:
- Web APIs: Đối tượng Document
- Web APIs: Đối tượng Node
Các trang web được Đại Phố thiết kế luôn mặc định các tính năng sau:
- Mã nguồn được tối ưu với các công cụ tìm kiếm.
- Trang web hỗ trợ thiết bị di động, tương thích với mọi thiết bị: điện thoại, máy tính bảng, máy tính và laptop. Sử dụng công nghệ HTML5, CSS3 Mobile Responsive.
- Dễ dàng thay đổi theo phong cách riêng của bạn.
- Dễ dàng thêm bớt số lượng các trang, và chỉnh sửa nội hiển thị trên website tùy ý
- Phần quản trị rõ ràng, trực quan, dễ sử dụng với cả những người không chuyên về IT.
Quản lí nội dung: có thể dễ dàng thêm, xóa, sửa các thông tin trên website
- Thông tin sản phẩm và dịch vụ của công ty
- Thông tin dự án, đối tác Giới thiệu – Liên hệ
- Thông tin giới thiệu, thông tin liên hệ
- Tin tức
- Hình ảnh trên website, sửa các tag alt, descriotion, caption
- Hình ảnh và caption trên Slideshow
Xin vui lòng liên hệ với chúng tôi nếu cần thêm thông tin