JavaScript >> Javascript 文檔 >  >> Tags >> class

如何使用 JavaScript 按類名選擇元素

getElementsByClassName() 方法提供了一種在 JavaScript 中選擇包含特定 CSS 類的所有 DOM 元素的快速方法。它返回一個 HTMLCollection 對象,它是一個包含 HTML 元素集合的類數組對象。

以下示例演示瞭如何使用 getElementsByClassName() 選擇和迭代 all 的方法 具有 active 的 HTML 元素 類名:

const elems = document.getElementsByClassName('active');

// iterate over all HTML elements
for (const el of elems) {
    console.log(el.innerText);
}

HTMLCollection 既不是 NodeList 也不是數組,您不能在其元素上使用 forEach() 循環。因此,我在上面的例子中使用了 for...of 語句。

getElementsByClassName() 該方法適用於所有現代和舊瀏覽器,包括 Internet Explorer 9 及更高版本。由於它只能用於按類名選擇元素,所以它的使用是有限的。

如果您想要更多靈活性 要通過任意 CSS 選擇器選擇 DOM 元素,請改用 querySelectorAll() 方法:

const elems = document.querySelectorAll('active');

查看如何選擇 DOM 元素指南,了解更多關於在 JavaScript 中獲取 DOM 元素的不同方法。


Tutorial JavaScript 教程
  1. 使用 Angular 進行運行時配置

  2. 微博:使用閉包創建 JavaScript 工廠

  3. 使用 NextJS 創建一個待辦事項應用程序

  4. Git 工作流策略:單個存儲庫中的多個團隊

  5. 使用 Backbone.js 構建聯繫人管理器:第 3 部分

  6. Redux 的分裂效應

  7. 單行代碼的狀態管理

  1. 面向 Web 開發人員的桌面開發 - 第 1 部分

  2. React Recoil 簡介 - 新狀態管理庫

  3. 如何取消設置 JavaScript 變量?

  4. 如何循環遍歷 JavaScript 對像中的相似鍵值對(a0,a1,a2)並生成一個沒有鍵(a)中數字的新數組?

  5. 如果我想讓我的網站持續使用 100 年怎麼辦?

  6. 10+ 酷 jQuery 時鐘教程(模擬和數字)

  7. 創建 Chrome 擴展程序的經驗教訓 📗

  1. 嗶嗶!如何製作 Twitter 機器人(第 2 部分)

  2. 如何調試 Lambda 函數中的錯誤

  3. 我在 Svelte 的副業

  4. 了解 Web 應用程序中的渲染:CSR 與 SSR