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.

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

Chạy Thử

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

Chạy Thử

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.

5/5 - (1 Đánh giá)
0 Bình luận

Bùi Tấn Lực

CEO Bùi Tấn Lực người sáng lập ra Web Mới, là một lập trình viên website, người viết content, chuyên tư vấn các vấn đề về website và SEO website

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 *

Bình luận, Hỏi đáp

Đă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