JavaScript >> Javascript 文檔 >  >> JavaScript

JavaScript 中 NodeList 和數組的區別

在之前的文章中,我們查看了 ES6 的 forEach() 方法來遍歷 NodeList 的元素以及 JavaScript 中的數組。在本快速指南中,我將討論 NodeList 之間的區別 和一個數組,以了解它們在後台是如何工作的。

NodeList 可能看起來像一個數組,但實際上,它們都是兩個完全不同的東西。 NodeList object 基本上是從 HTML 文檔中提取的 DOM 節點的集合。數組是 JavaScript 中的一種特殊數據類型,可以存儲任意元素的集合。

創建 一個 NodeList 對象,您可以使用 querySelectorAll 方法。以下示例選擇 all <p> 文檔中的元素:

const paragraphs = document.querySelectorAll('p');

可以使用數組文字語法或 Array 創建 JavaScript 數組 構造函數:

const foods = ['Pizza', 'Pasta', 'Burger', 'Cake'];
// OR
const foods = new Array('Pizza', 'Pasta', 'Burger', 'Cake');

數組和 NodeList 都提供 length 獲取項目總數的屬性 存儲:

console.log(`NodeList items: ${paragraphs.length}`);
console.log(`Array items: ${foods.length}`);

NodeLists 和數組的元素都可以訪問 通過數字索引:

const p = paragraphs[2]; // 3rd node
const f = foods[1]; // 2nd food name

雖然你可以訪問 NodeList 類似數組的元素並使用相同的 length 屬性,還是有一定的區別 .你可以 使用常見的數組方法,如 push() , pop() , slice() , 和 join() 直接在 NodeList 上 .你必須先轉換一個 NodeList 使用 Array.from() 到普通數組 方法。

NodeList 之間的另一個區別 一個數組就是一個 NodeList 可以是現場收藏。這意味著如果從 DOM 中添加或刪除任何元素,更改會自動應用 收藏。

兩者都是 querySelector()querySelectorAll() 方法返回一個靜態 列表,如果您對 DOM 進行任何更改,它不會更新。但是,像 Node.childNodes 這樣的屬性 活著 列表,它會在你修改 DOM 後立即更新。

最後,區分 NodeList 的最後一件事 來自數組的事實是 querySelectorAll() 不是 JavaScript API ,而是一個瀏覽器 API。這有點令人困惑,因為我們在 JavaScript 中使用這些 API 來操作 DOM。事實證明,根據 MDN,其他語言也可以訪問這些 API 以與 DOM 交互。

這是一個 Python DOM 操作示例(從 MDN 複製):

# Python DOM example
import xml.dom.minidom as m
doc = m.parse(r"C:\Projects\Py\chap1.xml")
doc.nodeName # DOM property of document object
p_list = doc.getElementsByTagName("para")

最大的外賣 來自 NodeList 與數組的討論:NodeList 是可用於訪問和操作 DOM 元素的節點集合,而數組是 JavaScript 對象,一次可以保存多個值。

NodeList 和數組都有自己的原型、方法和屬性。您可以輕鬆轉換 NodeList 如果你願意,可以到一個數組,但反過來不行。


Tutorial JavaScript 教程
  1. JavaScript 類私有

  2. React 和 Gatsby 項目中 Web 可訪問性的基礎知識

  3. 將命令 Discord.js 列入黑名單後的原因

  4. 一個地方尋找提供免費插圖資源的網站

  5. 從 JavaScript 中的對像數組中刪除重複項

  6. Snowpack + Rollup:天作之合

  7. 你有充分的理由使用 NPM 或 Yarn(或其他東西)嗎?

  1. 我正在創建遊戲井字遊戲,但是當開始遊戲時,它是直接顯示獲勝者姓名的第一次完全運行遊戲後

  2. 在 Jquery 中重複第二類時間

  3. 面向前端開發人員的柯里化

  4. 關於命名事物

  5. 在javascript中檢測瀏覽器及其版本

  6. 從集合 firebase angular/typescript 中獲取所有文檔 [關閉]

  7. 使用 AWS CDK Pipelines 和 Bitbucket 進行持續集成和交付 (CI/CD)

  1. React 和 TS 的最神奇的井字遊戲解決方案

  2. 16 多篇三月學習 JavaScript 的文章

  3. 我使用 AWS Cloudformation 的第一個項目 - 自動創建架構

  4. 為數據科學和 AI 產品調整 DevRel 策略