What is the difference between DOM token list and JavaScript Array?

I faced this issue when trying to manipulate DOM.

let count = 0;
const counter = document.getElementById('value');
const btns = document.querySelectorAll('.btn');

btns.forEach(btn =>{
    btn.addEventListener('click', handleClick)
})
function handleClick(event){
    const classList = event.currentTarget.classList;

    if(classList.contains('decrease')){ count--;}
    else if(classList.contains('increase')){ count++;}
    else {count=0}

    if(count>0){ counter.style.color="green";}
    else if(count<0){ counter.style.color="red";}
    else {counter.style.color="#222";}

    counter.textContent=count;
}

On the place on contains when I was trying to use includes then it is showing error.

A DOM toke list is its own data structure with its own methods, and while it does have methods similar to an array it does have all the methods of an array, and neither does an array have all the methods of a token list. Here’s the docs:
https://developer.mozilla.org/en-US/docs/Web/API/DOMTokenList

The docs will go over what methods this data structure has

1 Like

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.