Javascript: phương thức getElementsByClassName() – Đại Phố Web & Hosting

Posted on by mtoplistChuyên mục:Top List

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

Lấy tất cả các phần tử có cả hai lớp red và 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

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";
});
<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div id="parent-id">
        <p>hello word1</p>
        <p class="test">hello word2</p>
        <p >hello word3</p>
        <p>hello word4</p>
    </div>
    <script>
        var 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); //<p class="test">hello word2</p>
    </script>
</body>
</html>

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:

mtoplist