為什么我們在我指定的代碼中寫 [0] ？

Question

我們為什么要寫(item.classList[0] === "complete-btn")

比如什么是"item.classList[0]" ，為什么這里是 0 [0]？

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

Answer 1

classList是元素上DOMTokenList名稱的 DOMTokenList。 您可以像使用 arrays 一樣對列表進行索引，以訪問列表中的各個令牌（在本例中為類）。 例如，如果你有class="abc" ，那么.classList[0]是"a" ， .classList[1]是"b" ， .classList[2]是"c" 。 但是，請繼續閱讀。

問題中代碼的作者認為查看列表中的第一個class 是否為complete-btn是有意義的。 這是一種不好的做法，因為 class 列表中的類順序並不重要，並且可以隨着從列表中添加和刪除類而改變。¹因此，最好使用contains編寫：

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

對於帶有class="example complete-btn"的元素，原始代碼會失敗，而使用contains的代碼不會：

 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>

---

¹ “這是一種不好的做法，因為 class 列表中的類順序並不重要，並且隨着從列表中添加和刪除類，它可能會發生變化。” 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返回一個 DOMTokenList Object ，它就像一個數組，其中包含所有類。 在這里，我們從數組中訪問它的第一個 class，這就是為什么為 0。