HTML DOMTokenList リファレンスマニュアル

DOMTokenList

DOMTokenList スペースで区切られたトークンのセットです。

DOMTokenList（0から始まる）にインデックスでアクセスできます。

length 属性DOMTokenList内のトークンの数を返します。

注意：HTML 元素の classList 属性DOMTokenListを表す。

DOMTokenList 属性とメソッド

Pangalan Paglalarawan
add() Magdagdag ng isang o maraming token sa listahan.
contains() Bumalik sa true kung ang listahan ay naglalaman ng klase.
entries() Bumalik sa iterator na may kwey-value pair mula sa listahan.
forEach() 为列表中的每个令牌执行回调函数。
item() 返回指定索引处的令牌。
keys() 返回包含列表中键的迭代器。
length length
Bumalik ang bilang ng token sa listahan. remove()
Alisin ang isang o ilang token mula sa listahan. replace()
Palitan ang token sa listahan. supports()
Bumalik sa true kung ang token ay isa sa mga suportadong token ng attribute. toggle()
Palitan ang token sa gitna ng listahan. value
Bumalik bilang string ang listahan ng token. values()

palikura

halimbawa 1

Bumalik ang tagapag-iterator na may halaga sa listahan.

Idagdag ang klase "myStyle" sa elemento:

Subukan Ang Nag-iisang

halimbawa 2

Alisin ang klase "myStyle" mula sa elemento:

element.classList.remove("myStyle");

Subukan Ang Nag-iisang

halimbawa 3

Buksan at isara ang "myStyle":

element.classList.toggle("myStyle");

Subukan Ang Nag-iisang

Mayroon pang mas maraming halimbawa sa ibaba ng pahina.

Hindi array

DOMTokenList ay hindi array!

Mukhang array ang DOMTokenList, ngunit hindi ito talaga.

Maaari kang sumiklab sa DOMTokenList at gamitin ang index upang ma-referensiya ang mga token.

ngunit hindi mo magagamit ang mga Array method sa DOMTokenList, tulad ng push(), pop() o join().

palikura

halimbawa 1

Idagdag sa elemento ang ilang klase:

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

Subukan Ang Nag-iisang

halimbawa 2

Alisin mula sa elemento ang ilang klase:

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

Subukan Ang Nag-iisang

halimbawa 3

Hanapin ang bilang ng klase ng elemento:

let numb = element.classList.length;

Subukan Ang Nag-iisang

halimbawa 4

Hanapin ang klase ng elemento na "myDIV":

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

Subukan Ang Nag-iisang

halimbawa 5

Kumuha ng unang klase ng elemento:

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

Subukan Ang Nag-iisang

Halimbawa 6

Mayroon ba ang elemento ng klase "myStyle"?

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

Subukan Ang Nag-iisang

Halimbawa 7

Alisin ang "anotherClass" kapag mayroon ang elemento ng klase "myStyle":

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

Subukan Ang Nag-iisang

Halimbawa 8

Palitan ang mga klase upang bumuo ng pindutan ng dropdown:

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

Subukan Ang Nag-iisang

Halimbawa 9

Buwbuo ng Tanging Navigation Bar:

// Kumuha ng navigation bar
const navbar = document.getElementById("navbar");
// Kumuha ng posisyon ng navigation bar
const sticky = navbar.offsetTop;
// Agad magdagdag ng klase sticky sa navigation bar kapag naabot ang iyong posisyon ng paggalaw
// Alisin ang klase pagkatapos ng posisyon ng paggalaw
function myFunction() {
  if (window.pageYOffset  >= sticky) {
    navbar.classList.add("sticky")
  }
    navbar.classList.remove("sticky");
  }
}

Subukan Ang Nag-iisang