TL;DR: 使用element.classList上的add()方法 當你有一個DOM元素的引用時，你可以使用add方法向其添加一個新的類別： element.classList.add('myclass') 你可以使用remove方法來刪除一個類別： element.classList.remove('myclass') 實現細節：classList不是一個陣列，而是一個DoucmentFragment的集合。 你無法直接編輯classList，因為它是一個只讀屬性。不過，你可以使用其方法來修改元素的類別。
如何迭代 NodeList 並為每個元素附加事件監聽器 您可以通過使用 for..of 循環迭代 document.querySelectorAll() 調用返回的所有元素來為它們添加事件監聽器： const buttons = document.querySelectorAll("#select .button") for (const button of buttons) { button.addEventListener('click', function(event) { //... }) } 需要注意的是，document.querySelectorAll() 返回的不是數組，而是 NodeList 對象。 如果你希望，你可以使用 forEach 或 for..of 對它進行迭代，或者使用 Array.from() 將它轉換為數組。
使用 querySelector 和 querySelectorAll 訪問 DOM 元素。它們接受任何 CSS 選擇器，所以現在您不再受限於僅通過 id 選取元素 介紹 選擇器 API 基本的從 jQuery 到 DOM API 的範例 通過 id 選取 通過 class 選取 通過標籤名選取 更高級的從 jQuery 到 DOM API 的範例 選取多個項目 通過 HTML 屬性值選取 通過 CSS 偽類選取 選取元素的後代 介紹 過去，jQuery 和其他 DOM 函式庫由於提供了一種在頁面上選取元素的簡單方法而大獲成功。傳統上，瀏覽器僅提供了一種選取 DOM 元素的方法 - 通過其 id 屬性，使用 document 物件提供的 getElementById() 方法。 選擇器 API 自 2013 年以來，選擇器 API 允許您使用兩種更有用的方法： document.querySelector() document.querySelectorAll() 據 caniuse.com 告訴我們，它們可以安全使用，並且除所有其他現代瀏覽器外，甚至在 IE9 上也完全支持，因此除了需要支持 IE8（它只有部分支持）和更低版本之外，沒有理由不使用它們。...