为什么我们在我指定的代码中写 [0] ？

Question

why do we write (item.classList[0] === "complete-btn")

like what is "item.classList[0]" and why is it 0 [0] here?

if(item.classList[0] === "complete-btn"){
        const todo = item.parentElement;
        todo.classList.toggle("completed"); 
     }  
}

Answer 1

classList is a DOMTokenList of the class names on an element. You can index into the list the way you do with arrays to access the individual tokens (classes, in this case) in the list. For instance, if you have class="abc" , then .classList[0] is "a" , .classList[1] is "b" , and .classList[2] is "c" . But , keep reading.

The author of the code in the question decided it made sense to see if the first class in the list was complete-btn . This is poor practice, because the order of classes in the class list is not important and it can change as classes are added and removed from the list.¹ For that reason, it would be better written with contains :

if (item.classList.contains("complete-btn")) {

The original code would fail for an element with class="example complete-btn" , whereas the code using contains doesn't:

 const item = document.querySelector(".example"); console.log(item.classList[0] === "complete-btn"); // false, [0] is "example" console.log(item.classList.contains("complete-btn")); // true

 <div class="example complete-btn"></div>

---

¹ "This is poor practice, because the order of classes in the class list is not important and it can change as classes are added and removed from the list." Granted, if complete-btn is the first class listed in the class attribute of the HTML and that class is never removed via .classList.remove or .classList.toggle , it will remain the first in the list; still, it's poor practice to rely on it, not least because someone maintaining the HTML could add another class at the beginning, not realizing the JavaScript was relying on order — because in general, there is no order to the classes in class .

Answer 2

item.classlist returns a DOMTokenList Object which is like an array and has all classes in it. Here we are accessing its first class from the array that's why 0.