JavaScript >> Javascript 文檔 >  >> Tags >> DOM

如何從 querySelectorAll 遍歷 DOM 元素

在使用 vanilla JavaScript 時,通常需要在文檔對像模型 (DOM) 中查找元素列表並對其進行迭代。例如,查找具有特定 CSS 類的所有錨標記,並將單擊事件處理程序附加到它們。

querySelectorAll() 方法通常用於選擇特定類型的所有元素。它返回與指定選擇器匹配的 DOM 元素列表。返回的列表不是一個數組,而是一個包含節點集合的 NodeList 對象:

// select all anchor tags
const anchors = document.querySelectorAll('a.open-article');

// TODO: iterate over `NodeList` elements and attach a click handler

有很多方法可以遍歷 NodeList JavaScript 中的對象。讓我們看看它們。

forEach() 方法

循環遍歷 querySelectorAll() 返回的結果的最簡單最簡單的方法 是通過使用 forEach() 方法。此函數對 NodeList 中的每個節點執行一次給定函數 .

這是一個例子:

anchors.forEach(anchor => {
    anchor.addEventListener('click', () => {
        console.log('Link is clicked!');
    });
});

forEach() NodeList 的方法 僅適用於現代瀏覽器。如果您想支持 Internet Explorer 等舊瀏覽器,請改用以下小技巧:

[].forEach.call(anchors, function (anchor) {
    anchor.addEventListener('click', function () {
        console.log('Link is clicked!');
    });
});

您還可以使用擴展運算符來轉換 NodeListArray 目的。這將使您可以訪問所有數組方法,包括 forEach()

[...anchors].forEach(anchor => {
    anchor.addEventListener('click', () => {
        console.log('Link is clicked!');
    });
});

for...of 循環

另一種遍歷 NodeList 對象的方法是使用 ES6 for...of 語句。它語法簡潔明了,所有現代瀏覽器都支持:

for (const anchor of anchors) {
    anchor.addEventListener('click', () => {
        console.log('Link is clicked!');
    });
}

現代瀏覽器也支持 entries() , keys() , 和 values() NodeList 上的方法 目的。這些方法返回一個迭代器,允許您遍歷所有鍵值對。值始終為 Node 對象:

// entries() can be replaced with keys() or values()
for (const anchor of anchors.entries()) {
    anchor.addEventListener('click', () => {
        console.log('Link is clicked!');
    });
}

簡單的for 循環

如果要支持最大數量的瀏覽器,包括 Internet Explorer (IE),好的舊 for 循環是要走的路:

for (let i = 0; i < anchors.length; i++) {
    anchors[i].addEventListener('click', () => {
        console.log('Link is clicked!');
    });
}

上面的示例使用 ES6 箭頭函數語法。它不適用於 IE 和類似的舊瀏覽器。所以我們必須使用 ES5 函數聲明語法:

for (var i = 0; i < anchors.length; i++) {
    anchors[i].addEventListener('click', function () {
        console.log('Link is clicked!');
    });
}

第三方庫

如果您已經在使用jQuery,則無需使用上述任何方法:

$('a.open-article').on('click', () => {
    console.log('Link is clicked!');
});

在 Angular、React 和 Vue 等 JavaScript 框架中,您不應該使用 jQuery。而是使用 Lodash 的 _.forEach 方法:

_.forEach(anchors, (anchor, key) => {
    anchor.addEventListener('click', () => {
        console.log('Link is clicked!');
    });
});

Tutorial JavaScript 教程
  1. JavaScript 布爾運算符 |代碼

  2. Firebase + Jest 測試第 2 集

  3. 如何使用 React Context 構建多語言網站 Pt.2

  4. 將 GraphQL 與 Hooks 一起使用

  5. 使用 requestAnimationFrame() 折疊動畫

  6. 在 node.js 中獲取調用函數的名稱和行

  7. 實驗鍵盤遊戲

  1. 新的 Node.js 協議導入

  2. 如何讓你的功能性 React 組件性能更好(使用 useCallback 和 memo)

  3. Angular 13 檢測屏幕的寬度和高度教程

  4. 如何在 React 項目中使用 Sass

  5. 我的團隊如何意外遷移到 TypeScript 並喜歡它

  6. Apollo 客戶端:鉤子、片段、查詢、突變和生成的類型

  7. location.href 屬性與 location.assign() 方法

  1. nest.js + TypeORM + PostgreSQL

  2. 5 個最佳 JavaScript 認證

  3. Node.js 讀取 Google Sheet 🤓

  4. 巨魔和機器人正在擾亂社交媒體——這就是人工智能如何阻止它們(第 1 部分)