Panduan Referensi DOMTokenList HTML

DOMTokenList

DOMTokenList Adalah sekelompok token yang dipisahkan dengan spasi.

DOMTokenList dapat diakses melalui indeks (dari 0).

Properti lengthMengembalikan bilangan token dalam DOMTokenList.

Keterangan:HTML elemen Properti classListMewakili DOMTokenList.

Properti dan Metode DOMTokenList

Nama Deskripsi
add() Menambah satu atau lebih token ke dalam senarai.
contains() Mengembalikan true jika senarai mengandungi kelas.
entries() Mengembalikan iterator dengan pair kunci/nilai dari dalam senarai.
forEach() forEach()
Lakukan fungsi callback untuk setiap token di dalam daftar. item()
Kembalikan token di indeks yang ditentukan. keys()
Kembalikan iterator yang mengandung kunci di dalam daftar. length
Kembalikan jumlah token di dalam daftar. remove()
Hapus satu atau lebih 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()

contoh

contoh 1

Kembalikan iterator dengan nilai dalam daftar.

Tambah kelas "myStyle" ke elemen:

Cuba sendiri

contoh 2

Hapus kelas "myStyle" dari elemen:

element.classList.remove("myStyle");

Cuba sendiri

contoh 3

Buka dan tutup "myStyle":

element.classList.toggle("myStyle");

Cuba sendiri

Lebih banyak contoh disediakan di bawah halaman.

Bukan array

DOMTokenList bukan array!

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

Anda dapat melintasi DOMTokenList dan menggunakan indeks untuk mengacu kepada 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");

Cuba sendiri

contoh 2

Hapus beberapa kelas dari elemen:

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

Cuba sendiri

contoh 3

Dapatkan jumlah kelas elemen:

let numb = element.classList.length;

Cuba 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;

Cuba sendiri

contoh 5

Dapatkan kelas pertama elemen:

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

Cuba sendiri

Contoh 6

Adakah elemen mempunyai kelas "myStyle"?

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

Cuba sendiri

Contoh 7

Buang "anotherClass" jika elemen mempunyai kelas "myStyle":

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

Cuba sendiri

Contoh 8

Buka antara kelas untuk mencipta butang turun:

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

Cuba sendiri

Contoh 9

Cipta papan navigasi lembut:

// Dapatkan papan navigasi
const navbar = document.getElementById("navbar");
// Dapatkan posisi offset papan navigasi
const sticky = navbar.offsetTop;
// Tambah kalaan sticky kepada papan navigasi apabila Anda sampai ke posisi gerakan
// Buang kalaan ketika menghentikan posisi gerakan
function myFunction() {
  if (window.pageYOffset  >= sticky) {
    navbar.classList.add("sticky")
  } else {
    navbar.classList.remove("sticky");
  }
}

Cuba sendiri