HTML DOMTokenList ਸੂਚਨਾ ਕਿਤਾਬ

DOMTokenList

DOMTokenList ਖਾਲੀ ਜਗ੍ਹਾ ਵਾਲੇ ਟੋਕਨਾਂ ਦਾ ਗਰੁੱਪ

DOMTokenList ਨੂੰ ਇੰਡੈਕਸ ਰਾਹੀਂ ਪਹੁੰਚਣਾ (0 ਤੋਂ ਸ਼ੁਰੂ ਹੁੰਦਾ ਹੈ)।

length ਪ੍ਰਤੀਯੋਗਿਤਾDOMTokenList ਵਿੱਚ ਟੋਕਨਾਂ ਦੀ ਗਿਣਤੀ ਵਾਪਸ ਦੇਣਾ।

ਨੋਟ:HTML ਐਲੀਮੈਂਟ classList ਪ੍ਰਤੀਯੋਗਿਤਾDOMTokenList ਦਰਸਾਉਣ ਲਈ

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 上使用 Array 方法，如 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");
  }
}

ਆਪਣੇ ਅਨੁਸਾਰ ਕਰੋ