Phương thức getElementsByClassName() trong JavaScript
Bùi Tấn Lực - 959
- 15/09/2025
Chức năng của Phương thức getElementsByClassName() trong JavaScript
Phương thức getElementsByClassName() trong JavaScript dùng để lấy các phần tử HTML có tên lớp giống nhau và cùng nằm trong một phần tử cha để thực hiện những hành động vào các phần tử HTML con đó theo những vị trí được chỉ định.
Cú pháp của Phương thức getElementsByClassName() trong JavaScript
const danhsach = tenbiencha.getElementsByClassName('giatriclass');
tenbiencha: Tên biến cha là phần tử HTML cha thường dùng document.getElementById("giá trị id") để lấy.
giatriclass: Giá trị của các class con giống nhau.
danhsach: Trả về danh sách các phần tử HTML con có giá trị class giống nhau.
Code Phương thức getElementsByClassName() trong JavaScript
Phương thức getElementsByClassName() for get trong JavaScript
Dùng vòng lặp for để duyệt của các class và lấy ra nội dung, thuộc tính của các class:
// Lấy id của divid
const divid = document.getElementById("divid");
// Lấy danh sách class tieude nằm trong id divid
const list = divid.getElementsByClassName('tieude');
<div id="divid">
<p class="tieude" data-id="1">Tiêu đề 1</p>
<p class="tieude" data-id="2">Tiêu đề 2</p>
<p class="tieude" data-id="3">Tiêu đề 3</p>
<p class="tieude" data-id="4">Tiêu đề 4</p>
<p class="tieude" data-id="5">Tiêu đề 5</p>
</div>
<script>
document.write("<b>Kết quả:</b><br>");
// Lấy id của divid
const divid = document.getElementById("divid");
// Lấy danh sách class tieude nằm trong id divid
const list = divid.getElementsByClassName('tieude');
// Lặp qua các class tieude
for (let i = 0; i < list.length; i++) {
// Lấy nội dung và giá trị của thuộc tính data-id trong mỗi class tieude
document.write("Nội dung: "+list[i].innerText+", data-id: "+list[i].getAttribute('data-id')+"<br>");
}
</script>
Kết quả:
Tiêu đề 1
Tiêu đề 2
Tiêu đề 3
Tiêu đề 4
Tiêu đề 5
Kết quả:
Nội dung: Tiêu đề 1, data-id: 1
Nội dung: Tiêu đề 2, data-id: 2
Nội dung: Tiêu đề 3, data-id: 3
Nội dung: Tiêu đề 4, data-id: 4
Nội dung: Tiêu đề 5, data-id: 5
Phương thức getElementsByClassName() for set trong JavaScript
Tạo nội dung cho từng class, tạo giá trị cho từng thuộc tính của class, những class đó nằm trong một phần tử HTML khác có ID hoặc nằm trong document (body):
<div id="divid">
<p class="tieude">Tiêu đề 1</p>
<p class="tieude">Tiêu đề 2</p>
<p class="tieude">Tiêu đề 3</p>
<p class="tieude">Tiêu đề 4</p>
<p class="tieude">Tiêu đề 5</p>
</div>
<script>
document.write("<b>Kết quả:</b><br>");
// Lấy id của divid
const divid = document.getElementById("divid");
// Lấy danh sách class tieude nằm trong id divid
const list = divid.getElementsByClassName('tieude');
// Lặp qua các class tieude
for (let i = 0; i < list.length; i++) {
// Tạo nội dung cho từng class tieude
list[i].innerText = "Tiêu đề mới "+i;
// Tạo giá trị cho từng thuộc tính data-id cho từng class tieude
list[i].setAttribute("data-id","thep"+i);
// Lấy nội dung và giá trị của thuộc tính data-id trong mỗi class tieude
document.write("Nội dung: "+list[i].innerText+", data-id: "+list[i].getAttribute('data-id')+"<br>");
}
</script>
Kết quả:
Tiêu đề mới 0
Tiêu đề mới 1
Tiêu đề mới 2
Tiêu đề mới 3
Tiêu đề mới 4
Kết quả:
Nội dung: Tiêu đề mới 0, data-id: thep0
Nội dung: Tiêu đề mới 1, data-id: thep1
Nội dung: Tiêu đề mới 2, data-id: thep2
Nội dung: Tiêu đề mới 3, data-id: thep3
Nội dung: Tiêu đề mới 4, data-id: thep4
Phương thức getElementsByClassName() innerHTML trong JavaScript
Lấy phần tử HTML có tên lớp cần tìm và những phần tử đó nằm trong một phần tử cha khác , chèn nội dung vào phần tử đó với một vị trí được chỉ định:
<ul id="ulid">
<li class="liclass">Home</li>
<li class="liclass">Giới thiệu</li>
<li class="liclass">Hosting</li>
<li class="liclass">Blog</li>
<li class="liclass">Liên hệ</li>
</ul>
<p>Click vào nút THAY NỘI DUNG để thay thế giá trị thẻ li ở vị trí 0</p>
<button onclick="thayNoiDung()">THAY NỘI DUNG</button>
<script>
function thayNoiDung() {
// Lấy id của ul
const list = document.getElementById("ulid");
// Lấy phần tử có tên lớp liclass ở vị trí 0, cập nhật nội dung là Trang chủ, thẻ li có tên lớp liclass nằm trong thẻ ul có id ulid
list.getElementsByClassName("liclass")[0].innerHTML = "Trang chủ";
}
</script>
Phương thức getElementsByClassName() length trong JavaScript
Đếm số phần tử có tên lớp giống nhau, những phần tử đó nằm trong một phần tử cha:
<ul id="ulid">
<li class="liclass">Home</li>
<li class="liclass">Giới thiệu</li>
<li class="liclass">Hosting</li>
<li class="liclass">Blog</li>
<li class="liclass">Liên hệ</li>
</ul>
<p>Số phần tử có tên lớp liclass: <span id="sophantu"></span></p>
<script>
// Lấy id chứa các thẻ li
const ulid = document.getElementById("ulid");
// Lấy các li nằm trong thẻ ul có id ulid
const nodes = ulid.getElementsByClassName("liclass");
// Đếm số li nằm trong thẻ ul có id ulid
document.getElementById("sophantu").innerHTML = nodes.length;
</script>
Phương thức getElementsByClassName() style trong JavaScript
Lấy phần tử HTML có tên lớp cần tìm và những phần tử đó nằm trong một phần tử cha khác , thêm thuộc tính style vào phần tử đó với một vị trí được chỉ định:
<ul id="ulid">
<li class="liclass">Home</li>
<li class="liclass">Giới thiệu</li>
<li class="liclass">Hosting</li>
<li class="liclass">Blog</li>
<li class="liclass">Liên hệ</li>
</ul>
<p>Click vào nút THÊM STYLE để thêm style vào li có class liclass ở vị trí 1</p>
<button onclick="themStyle()">THÊM STYLE</button>
<script>
function themStyle() {
// Lấy id của ul
const list = document.getElementById("ulid");
// Lấy phần tử có tên lớp liclass ở vị trí 1, thêm style, thẻ li nằm trong ul có id là ulid
list.getElementsByClassName("liclass")[1].style = "color:red";
}
</script>
Khi Nào Nên Dùng getElementsByClassName Trong JavaScript?
getElementsByClassName() phù hợp khi cần tìm và thao tác với nhiều phần tử HTML cùng sử dụng một class. Thay vì truy cập từng phần tử riêng lẻ, bạn có thể lấy cả nhóm phần tử rồi xử lý theo nhu cầu.
Khi cần lấy nhiều phần tử có cùng class
Đây là trường hợp điển hình nhất. Khi một trang có nhiều phần tử dùng chung một class, getElementsByClassName() giúp lấy chúng trong một lần gọi.
const items = document.getElementsByClassName("item");
for (let i = 0; i < items.length; i++) {
items[i].style.display = "none";
}
Đoạn mã trên tìm tất cả phần tử có class item và ẩn từng phần tử. Cách làm này hữu ích với danh sách sản phẩm, menu, thẻ nội dung hoặc các nhóm phần tử có cùng chức năng.
Khi muốn xử lý danh sách phần tử theo nhóm
Nếu nhiều phần tử cần thực hiện cùng một thao tác, việc lấy chúng theo class sẽ giúp mã JavaScript ngắn gọn và dễ quản lý hơn. Bạn có thể duyệt qua kết quả để thêm class, thay đổi nội dung hoặc cập nhật thuộc tính.
const buttons = document.getElementsByClassName("btn");
for (let i = 0; i < buttons.length; i++) {
buttons[i].textContent = "Đã chọn";
}
Cách tiếp cận này đặc biệt phù hợp với các thành phần giao diện được lặp lại. Chỉ cần gán cùng một class, JavaScript có thể áp dụng một quy tắc xử lý cho toàn bộ nhóm.
Khi cần thao tác với phần tử được tạo động
getElementsByClassName() trả về một HTMLCollection có tính động. Vì vậy, khi DOM thay đổi và có phần tử mới được thêm vào với class phù hợp, tập hợp này có thể phản ánh thay đổi đó.
const items = document.getElementsByClassName("item");
const newItem = document.createElement("div");
newItem.className = "item";
document.body.appendChild(newItem);
console.log(items.length);
Đặc điểm này có thể hữu ích khi làm việc với danh sách được cập nhật trong quá trình chạy trang. Tuy nhiên, nếu chỉ cần một tập phần tử cố định để xử lý, nên cân nhắc cách chọn phần tử phù hợp với cấu trúc và mục đích của đoạn mã.
Lời kết
Cảm ơn các bạn đã tham khảo bài viết Phương thức getElementsByClassName() trong JavaScript.
- 0 Bình luận
Email, Điện thoại của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *
