Phương thức getElementsByClassName() trong JavaScript

• Bùi Tấn Lực
• 23
• 15/09/2025

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, chi tiết như nào hãy cùng chúng tôi phân tích:

Phương thức getElementsByClassName() trong JavaScript

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.

Code Phương thức getElementsByClassName() trong JavaScript

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>

Chạy Thử

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>

Chạy Thử

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>

Chạy Thử

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.

Bùi Tấn Lực

Chia sẻ nội dung đánh giá của bạn về Phương thức getElementsByClassName() trong JavaScript
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 *

Đăng ký tư vấn miễn phí

Tìm hiểu 1 năm không bằng lắng nghe 1 câu tư vấn