Mwongozo wa HTML DOMTokenList

DOMTokenList

DOMTokenList Ni kikomo cha mafaa kwenye ukosefu wa nafasi.

Inafikia DOMTokenList kwa tabaka (kuanza kutoka kwa 0).

Mafanikio ya lengthInatangaza namba ya mafaa katika DOMTokenList.

Maelezo:Kwa elementi ya HTML Mafanikio ya classListInaeleza DOMTokenList.

Mafanikio ya DOMTokenList na matumizi

Jina Maelezo
add() Kununua mafaa au zaidi kwenye orodha.
contains() Inatangaza kwamba orodha ina kikoa cha kile.
entries() Kutowa kwa kueleza kufikia kipya cha msingi kwa muundo wa chanzo na thamani.
forEach() Kutumia kikundi cha thamani kwa kila thamani kati ya mkono.
item() Ruhusu kubadilika kwa kuzungumza kwa thamani kwa ukurabu wa kipakuo.
keys() Ruhusu kubadilika kwa kuzungumza kwa thamani za kiwango kati ya mkono.
length Ruhusu kubadilika kwa kuzungumza kwa ukurabu wa thamani wa mkono.
remove() Kutupata mabaki moja au mbili kutoka mkono.
replace() Kutahariri thamani kati ya mkono.
supports() Ruhusu kubadilika kwa kuzungumza kwa thamani kama ni moja ya thamani za sababu.
toggle() Kubadilika kwa kuzungumza kwa thamani kati ya mabaki.
value Ruhusu kubadilika kwa kuzungumza kwa thamani za mkono.
values() Ruhusu kubadilika kwa kuzungumza kwa ukurabu wa thamani.

mivivu

mivivu 1

Kongeza kikla "myStyle" kwa elementi:

element.classList.add("myStyle");

Jaribu tena

mivivu 2

Kutowa kikla "myStyle" kwa elementi:

element.classList.remove("myStyle");

Jaribu tena

mivivu 3

Fungua na kuzifungua "myStyle":

element.classList.toggle("myStyle");

Jaribu tena

Inaonyeshwa mivivu zaidi chini ya ukurasa.

Haina array

DOMTokenList haina array!

DOMTokenList inadai kuwa kifaa kama array, lakini hivyo hivyo.

Wewe unaweza kutembelea DOMTokenList na kutumia agano kueleza mkono zake.

lakini hatuwezi kutumia method ya Array kwa DOMTokenList, kama push(), pop() au join().

mivivu

mivivu 1

Kongeza kikla nyingi kwa elementi:

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

Jaribu tena

mivivu 2

Kutowa kikla nyingi kwa elementi:

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

Jaribu tena

mivivu 3

Pataa ukurabu wa kikla cha elementi:

let numb = element.classList.length;

Jaribu tena

mivivu 4

Pataa jina ya kikla ya elementi ya "myDIV":

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

Jaribu tena

mivivu 5

Pata kiklasa kwanza ya elementi:

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

Jaribu tena

Mfano 6

Ina kiklasa "myStyle" elementi?

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

Jaribu tena

Mfano 7

Ikiwa elementi ina kiklasa "myStyle", kumachwa "anotherClass":

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

Jaribu tena

Mfano 8

Kuchagua kati ya maadili, kuwa mkono kikataa kichwapa tukio:

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

Jaribu tena

Mfano 9

Kujenga barua ya naia ya kina:

// Pata barua ya naia
const navbar = document.getElementById("navbar");
// Pata upeo wa barua ya naia
const sticky = navbar.offsetTop;
// Kupata upeo wa kusubiri, wakilisha kiklasa "sticky" kwa barua ya naia
// Kupunguza upeo wa kusubiri tena
function myFunction() {
  if (window.pageYOffset  >= sticky) {
    navbar.classList.add("sticky")
  }
    navbar.classList.remove("sticky");
  }
}

Jaribu tena