एचटीएमएल डॉमटोकनलिस्ट संदर्भ दस्तावेज़

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 को घूम सकते हैं और इसके टोकन को इंडेक्स के द्वारा उठा सकते हैं。

लेकिन आप डॉमटोकनलिस्ट पर एरेरे मेथडोज़ का उपयोग नहीं कर सकते, जैसे 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")
  }
    navbar.classList.remove("sticky");
  }
}

अपने आप सामने करें