Panduan Referensi DOMTokenList HTML

DOMTokenList

DOMTokenList Merupakan grup token yang dipisahkan spasi.

DOMTokenList dapat diakses melalui indeks (dari 0).

Properti lengthMengembalikan jumlah token dalam DOMTokenList.

Keterangan:HTML elemen Properti classListMewakili DOMTokenList.

Properti dan metode DOMTokenList

Nama Deskripsi
add() Menambahkan satu atau beberapa token ke dalam daftar.
contains() Kembalikan true jika daftar mengandung kelas.
entries() Mengembalikan iterator dengan pasangan kunci/nilai dari dalam daftar.
forEach() Lakukan fungsi callback untuk setiap token di dalam daftar.
item() Kembalikan token di indeks yang ditentukan.
keys() Kembalikan iterator dengan kunci di dalam daftar.
length Kembalikan jumlah token di dalam daftar.
remove() Hapus satu atau beberapa token dari daftar.
replace() Ganti token di dalam daftar.
supports() Kembalikan true jika token adalah salah satu token yang didukung properti.
toggle() Tukar token di antara daftar.
value Kembalikan daftar token dalam bentuk string.
values() Kembalikan iterator dengan nilai dalam daftar.

Contoh

Contoh 1

Tambah kelas "myStyle" ke elemen:

Tambah kelas "myStyle" ke elemen:

Coba sendiri

Contoh 2

Hapus kelas "myStyle" dari elemen:

element.classList.remove("myStyle");

Coba sendiri

Contoh 3

Buka dan tutup "myStyle":

element.classList.toggle("myStyle");

Coba sendiri

Halaman bawah ini menyediakan contoh lebih banyak.

Bukan array

DOMTokenList bukan array!

DOMTokenList mungkin terlihat seperti array, tetapi hal ini bukan seperti itu.

Anda dapat mengelilingi DOMTokenList dan menggunakan referensi indeks untuk token-nya.

Tetapi Anda tidak dapat menggunakan metode Array di DOMTokenList, seperti push(), pop(), atau join().

Contoh

Contoh 1

Tambah beberapa kelas ke elemen:

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

Coba sendiri

Contoh 2

Hapus beberapa kelas dari elemen:

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

Coba sendiri

Contoh 3

Dapatkan jumlah kelas elemen:

let numb = element.classList.length;

Coba sendiri

Contoh 4

Dapatkan nama kelas elemen "myDIV":

<div id="myDIV" class="myStyle anotherClass thirdClass">
<p>Saya adalah myDIV.</p>
</div>
const list = document.getElementById("myDIV").classList;

Coba sendiri

Contoh 5

Ambil kelas pertama elemen:

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

Coba sendiri

Contoh 6

Apakah elemen memiliki kelas "myStyle"?

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

Coba sendiri

Contoh 7

Jika elemen memiliki kelas "myStyle", hapus "anotherClass":

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

Coba sendiri

Contoh 8

Buka antara kelas untuk membuat tombol turun:

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

Coba sendiri

Contoh 9

Buat navigasi yang lepas:

// Dapatkan navigasi
const navbar = document.getElementById("navbar");
// Dapatkan posisi offset navigasi
const sticky = navbar.offsetTop;
// Tambahkan kelas sticky ke navigasi saat Anda mencapai posisi gerakan
// Buang kelas saat posisi gerakan keluar
function myFunction() {
  if (window.pageYOffset >= sticky) {
    navbar.classList.add("sticky")
  } else {
    navbar.classList.remove("sticky");
  }
}

Coba sendiri