HTML DOMTokenList పరిశీలన మాదిరి

DOMTokenList

DOMTokenList అనేక టోకెన్లను వేరు వేరుగా అంటే విభజించబడిన ఒక సమష్టి గా ఉంటాయి.

డామ్ టోకెన్ లిస్ట్ ను ఇండెక్స్ ద్వారా ప్రాప్యం చేసుకోవచ్చు (0 నుండి ప్రారంభించబడుతుంది).

length గుణండామ్ టోకెన్ లిస్ట్ లో టోకెన్ల సంఖ్యను తిరిగి ఇవ్వు.

గమనిక:హెచ్ఎంఎల్ అంశం classList గుణండామ్ టోకెన్ లిస్ట్ ను ప్రతినిధీకరిస్తుంది.

DOMTokenList గుణాలు మరియు పద్ధతులు

పేరు వివరణ
add() ఒకటి లేదా పలు టోకెన్స్ జాబితాకు జోడించు.
contains() జాబితా లో క్లాస్సులు ఉన్నట్లయితే true తిరిగి ఇవ్వు.
entries() జాబితా నుండి కీ/విలువ కలిగిన ఇటరేటర్స్ తిరిగి ఇవ్వు.
forEach() జాబితాలో ప్రతి టోకెన్పై కాల్బ్యాక్ ఫంక్షన్ అమలు చేయండి.
item() నిర్దేశించిన అంకురంలో టోకెన్ను పొందండి.
keys() జాబితాలో కీలను కలిగించు ఇటీరేటర్ని పొందండి.
length జాబితాలో టోకెన్ల సంఖ్యను పొందండి.
remove() జాబితాలో ఒకటి లేదా అనేక టోకెన్లను తొలగించండి.
replace() జాబితాలో టోకెన్లను పునఃస్థాపించండి.
supports() టోకెన్ సహాయక టోకెన్లలో ఒకటిగా ఉంటే true పొందండి.
toggle() జాబితాలో టోకెన్ల మధ్య పరివర్తన చేయండి.
value టోకెన్ల జాబితాను స్ట్రింగ్ రూపంలో పొందండి.
values() జాబితాలో విలువలను కలిగించు ఇటీరేటర్ని పొందండి.

ఉదాహరణ

ఉదాహరణ 1

"myStyle" క్లాస్ను ఎలమెంట్కు జోడించండి:

element.classList.add("myStyle");

స్వయంగా ప్రయత్నించండి

ఉదాహరణ 2

"myStyle" క్లాస్ను ఎలమెంట్ నుండి తొలగించండి:

element.classList.remove("myStyle");

స్వయంగా ప్రయత్నించండి

ఉదాహరణ 3

"myStyle"ని ఆన్ / ఆఫ్ చేయండి:

element.classList.toggle("myStyle");

స్వయంగా ప్రయత్నించండి

పేజీ కింద మరిన్ని ఉదాహరణలు లభిస్తాయి.

అర్రే కాదు

DOMTokenList అర్రే కాదు!

DOMTokenList అర్రే వలె కనిపించవచ్చు, కానీ అలా కాదు.

మీరు DOMTokenListని గుర్తించి అంకురాన్ని వినియోగించవచ్చు.

కానీ మీరు DOMTokenListపై అర్రే మెథడ్స్ వినియోగించలేరు, ఉదాహరణకు push()、pop() లేదా join()。

ఉదాహరణ

ఉదాహరణ 1

ఎలమెంట్కు అనేక క్లాస్లను జోడించండి:

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

స్వయంగా ప్రయత్నించండి

ఉదాహరణ 2

ఎలమెంట్ నుండి అనేక క్లాస్లను తొలగించండి:

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

స్వయంగా ప్రయత్నించండి

ఉదాహరణ 3

ఎలమెంట్ యొక్క క్లాస్ పేర్ల సంఖ్యను పొందండి:

let numb = element.classList.length;

స్వయంగా ప్రయత్నించండి

ఉదాహరణ 4

"myDIV" ఎలమెంట్ యొక్క క్లాస్ పేర్లను పొందండి:

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

స్వయంగా ప్రయత్నించండి

ఉదాహరణ 5

ఎలిమెంట్ యొక్క మొదటి క్లాస్ పొందండి:

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

స్వయంగా ప్రయత్నించండి

ఉదాహరణ 6

ఎలిమెంట్ కి "myStyle" క్లాస్ ఉన్నారా?

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

స్వయంగా ప్రయత్నించండి

ఉదాహరణ 7

ఇఫ్ ఎలిమెంట్ కి "myStyle" క్లాస్ ఉన్నట్లయితే "anotherClass" తొలగించండి:

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

స్వయంగా ప్రయత్నించండి

ఉదాహరణ 8

క్లాసుల మధ్య పరివర్తనం చేయడంద్వారా డౌన్ బటన్ సృష్టించండి:

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

స్వయంగా ప్రయత్నించండి

ఉదాహరణ 9

స్టికీ నేవిగేషన్ బార్ సృష్టించండి:

// నేవిగేషన్ బార్ ను పొందండి
const navbar = document.getElementById("navbar");
// నేవిగేషన్ బార్ స్థానాన్ని పొందండి
const sticky = navbar.offsetTop;
// మీరు దాని స్క్రాల్ స్థానానికి చేరుకున్నప్పుడు sticky క్లాస్ నవీకరించండి
// స్క్రాల్ స్థానం బయటకు వెళ్ళినప్పుడు దానిని తొలగించండి
function myFunction() {
  if (window.pageYOffset  >= sticky) {
    navbar.classList.add("sticky")
  } else {
    navbar.classList.remove("sticky");
  }
}

స్వయంగా ప్రయత్నించండి