getElementsByClassName

Bài học 5 trên 13 trong khóa học Các phương thức DOM trong JavaScript của Coddy.

Hàm (function) getElementsByClassName() trả về một mảng gồm tất cả phần tử có thuộc tính class trùng khớp, hữu ích khi chọn nhiều phần tử có cùng kiểu dáng hoặc hành vi. Ví dụ:

const elements = document.getElementsByClassName("className");

Đoạn code trên lấy các phần tử có lớp className và lưu chúng vào biến có tên elements.

Ta cần lặp qua biến này để thay đổi thuộc tính của tất cả phần tử tương tự, ví dụ:

for (const element of elements) {
	className.style.color = "blue";
	className.style.fontWeight = "bolder";
}

Thử thách

Dễ

Bạn được cung cấp đoạn code HTML chứa các đoạn văn có tên lớp highlight.

Chỉ sử dụng JavaScript, hãy đổi màu và độ đậm của chữ:

Lấy các phần tử bằng hàm getElementsByClassName().
Lặp qua biến phần tử đã lấy bằng vòng lặp for.
Dùng thuộc tính style để đổi color thành “orange” và fontWeight thành “bold” cho mọi phần tử trong mảng.

Bạn cần làm mới trang web để thấy các thay đổi:

Tự làm thử

<!DOCTYPE html>
<html>
    <body>
        <p class="highlight">Text 1</p>
        <p class="highlight">Text 2</p>
        <script src="script.js"></script>
    </body>
</html>

Tất cả bài học trong Các phương thức DOM trong JavaScript

1Giới thiệu

Giới thiệu Mô hình đối tượng tài liệu

2Phương thức DOM I

getElementById Chỉnh sửa kiểu dáng phần tửgetElementsByClassNameDuyệt qua và thao tác getElementsByTagName querySelector

3Các phương thức DOM II

querySelectorAll addEventListener innerHTML createElement và appendChild Chuyển đổi classList

Tự luyện tập: Playground Web