Javascript: phương thức getElementsByClassName()

Javascript: phương thức getElementsByClassName()

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

document.getElementsByClassName("test");

Lấy tất cả các phần tử có cả hai lớp redtest

document.getElementsByClassName("red 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

document.getElementById("main").getElementsByClassName("test");

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
Edge
FireFox Từ version 4.0
Internet Eplorer Từ version 9
Opera
Safari

Trình duyệt trên thiết bị di động

Trình duyệt Tương thích
Android Webview
Chrome for Android
Edge Mobile
FireFox for Android Từ version 4.0
Opera
iOS Safari
Samsung Internet ?

Tham khảo:

Các tính năng mặc định của trang web

Các trang web được Đại Phố thiết kế luôn mặc định các tính năng sau:

  • Mã nguồn được tối ưu với các công cụ tìm kiếm.
  • Trang web hỗ trợ thiết bị di động, tương thích với mọi thiết bị: điện thoại, máy tính bảng, máy tính và laptop. Sử dụng công nghệ HTML5, CSS3 Mobile Responsive.
  • Dễ dàng thay đổi theo phong cách riêng của bạn.
  • Dễ dàng thêm bớt số lượng các trang, và chỉnh sửa nội hiển thị trên website tùy ý
  • Phần quản trị rõ ràng, trực quan, dễ sử dụng với cả những người không chuyên về IT.

Quản lí nội dung: có thể dễ dàng thêm, xóa, sửa các thông tin trên website

  • Thông tin sản phẩm và dịch vụ của công ty
  • Thông tin dự án, đối tác Giới thiệu – Liên hệ
  • Thông tin giới thiệu, thông tin liên hệ
  • Tin tức
  • Hình ảnh trên website, sửa các tag alt, descriotion, caption
  • Hình ảnh và caption trên Slideshow
Xin vui lòng liên hệ với chúng tôi nếu cần thêm thông tin