HTML DOMTokenList Referans Kılavuzu

DOMTokenList

DOMTokenList Beyaz boşluklarla ayrılmış jetonlardan oluşan bir grup.

DOMTokenList'a indeks aracılığıyla erişilebilir (0'dan başlar).

length ÖzelliğiDOMTokenList içindeki jeton sayısını döndür.

Açıklama:HTML elementinin classList ÖzelliğiDOMTokenList'ı temsil eder.

DOMTokenList Özellikleri ve Metodları

İsim Açıklama
add() Bir veya daha fazla jeton ekleyin.
contains() Liste sınıflar içeriyorsa true döndür.
entries() Listeden anahtar/değer çiftine sahip döngüleyici döndür.
forEach() 为列表中的每个令牌执行回调函数。
item() 返回指定索引处的令牌。
keys() 返回包含列表中键的迭代器。
length 返回列表中的令牌数。
remove() 从列表中删除一个或多个令牌。
replace() 替换列表中的令牌。
supports() 如果令牌是属性支持的令牌之一，则返回 true。
toggle() 在列表中的令牌之间切换。
value 以字符串形式返回令牌列表。
values() 返回带有列表中值的迭代器。

实例

Örnek 1

将 "myStyle" 类添加到元素：

element.classList.add("myStyle");

Kişisel Deneyim

Örnek 2

从元素中删除 "myStyle" 类：

element.classList.remove("myStyle");

Kişisel Deneyim

Örnek 3

打开并关闭 "myStyle"：

element.classList.toggle("myStyle");

Kişisel Deneyim

页面下方提供更多实例。

不是数组

DOMTokenList 不是数组！

DOMTokenList 可能看起来像数组，但事实并非如此。

您可以遍历 DOMTokenList 并使用索引引用其令牌。

但是您不能在 DOMTokenList 上使用 Array 方法，如 push()、pop() 或 join()。

实例

Örnek 1

向元素添加多个类：

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

Kişisel Deneyim

Örnek 2

从元素中删除多个类：

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

Kişisel Deneyim

Örnek 3

获取元素的类名数量：

let numb = element.classList.length;

Kişisel Deneyim

Örnek 4

获取 "myDIV" 元素的类名：

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

Kişisel Deneyim

Örnek 5

Elemanın ilk sınıfını alın:

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

Kişisel Deneyim

Örnek 6

Element "myStyle" sınıfına sahip mi?

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

Kişisel Deneyim

Örnek 7

Eğer element "myStyle" sınıfına sahipse "anotherClass" sınıfını silin:

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

Kişisel Deneyim

Örnek 8

Sınıflar arasında geçiş yaparak açılır düğme oluşturma:

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

Kişisel Deneyim

Örnek 9

Sabit Navigasyon Çubuğu Oluşturma:

// Navigasyon çubuğunu alın
const navbar = document.getElementById("navbar");
// Navigasyon çubuğunun konumunu alın
const sticky = navbar.offsetTop;
// Sizin bu konuma ulaştığınızda sticky sınıfını navigasyon çubuğuna ekleyin
// Kaydırma konumundan ayrılırken onu sil
function myFunction() {
  if (window.pageYOffset  >= sticky) {
    navbar.classList.add("sticky")
  } else {
    navbar.classList.remove("sticky");
  }
}

Kişisel Deneyim