Tài liệu tham khảo DOMTokenList HTML

DOMTokenList

DOMTokenList Là một nhóm các từ khóa cách nhau bằng khoảng trống.

Có thể truy cập DOMTokenList qua chỉ số (bắt đầu từ 0).

Thuộc tính lengthTrả về số lượng từ khóa trong DOMTokenList.

Ghi chú:Của phần tử HTML Thuộc tính classListBiểu thị DOMTokenList.

Thuộc tính và phương thức DOMTokenList

Tên Mô tả
add() Thêm một hoặc nhiều từ khóa vào danh sách.
contains() Trả về true nếu danh sách chứa lớp.
entries() Trả về bộ duyệt có cặp khóa/giá trị từ danh sách.
forEach() Thực hiện hàm gọi lại cho mỗi token trong danh sách.
item() Trả về token tại vị trí chỉ định.
keys() Trả về bộ迭代器 chứa các khóa trong danh sách.
length Trả về số lượng token trong danh sách.
remove() Xóa một hoặc nhiều token trong danh sách.
replace() Thay thế token trong danh sách.
supports() Trả về true nếu token là một trong các token được hỗ trợ bởi thuộc tính.
toggle() Chuyển đổi giữa các token trong danh sách.
value Trả về danh sách token dưới dạng chuỗi.
values() Trả về bộ迭代器 có giá trị trong danh sách.

Mô hình

Ví dụ 1

Thêm lớp "myStyle" vào phần tử:

element.classList.add("myStyle");

Thử ngay

Ví dụ 2

Xóa lớp "myStyle" từ phần tử:

element.classList.remove("myStyle");

Thử ngay

Ví dụ 3

Mở và đóng "myStyle":

element.classList.toggle("myStyle");

Thử ngay

Dưới đây là nhiều ví dụ khác.

Không phải là một mảng

DOMTokenList không phải là một mảng!

DOMTokenList có thể trông giống như một mảng, nhưng thực tế không phải vậy.

Bạn có thể duyệt qua DOMTokenList và sử dụng chỉ số để tham chiếu các token của nó.

Nhưng bạn không thể sử dụng các phương thức mảng trên DOMTokenList, chẳng hạn như push(), pop() hoặc join().

Mô hình

Ví dụ 1

Thêm nhiều lớp vào phần tử:

element.classList.add("myStyle", "anotherClass", "thirdClass");

Thử ngay

Ví dụ 2

Xóa nhiều lớp từ phần tử:

element.classList.remove("myStyle", "anotherClass", "thirdClass");

Thử ngay

Ví dụ 3

Lấy số lượng tên lớp của phần tử:

let numb = element.classList.length;

Thử ngay

Ví dụ 4

Lấy tên lớp của phần tử "myDIV":

<div id="myDIV" class="myStyle anotherClass thirdClass">
<p>Tôi là myDIV.</p>
</div>
const list = document.getElementById("myDIV").classList;

Thử ngay

Ví dụ 5

Lấy lớp đầu tiên của phần tử:

let className = element.classList.item(0);

Thử ngay

Ví dụ 6

Phần tử có lớp "myStyle" không?

let x = element.classList.contains("myStyle");

Thử ngay

Ví dụ 7

Nếu phần tử có lớp "myStyle", hãy xóa lớp "anotherClass":

if (element.classList.contains("mystyle")) {
  element.classList.remove("anotherClass");
}

Thử ngay

Ví dụ 8

Chuyển đổi giữa các lớp để tạo nút xuống:

document.getElementById("myBtn").onclick = function() {myFunction()};
function myFunction() {
  document.getElementById("myDropdown").classList.toggle("show");
}

Thử ngay

Ví dụ 9

Tạo thanh hướng dẫn dính:

// Lấy thanh hướng dẫn
const navbar = document.getElementById("navbar");
// Lấy vị trí cuộn của thanh hướng dẫn
const sticky = navbar.offsetTop;
// Khi bạn đến vị trí cuộn của nó, thêm lớp sticky vào thanh hướng dẫn
// Xóa khi di chuyển khỏi vị trí cuộn
function myFunction() {
  if (window.pageYOffset >= sticky) {
    navbar.classList.add("sticky")
  }
    navbar.classList.remove("sticky");
  }
}

Thử ngay