在 JavaScript 中，將 NodeList 轉換為數組的最佳方法是什么？

Question

DOM 方法document.querySelectorAll() （以及其他一些方法）返回一個NodeList 。

要對列表進行操作，例如使用forEach() ，必須首先將NodeList轉換為Array 。

將NodeList轉換為Array的最佳方法是什么？

Answer 1

使用 ES6，您可以簡單地執行以下操作：

const spanList = [...document.querySelectorAll("span")];

Answer 2

在 ES6 中，您可以使用Array.from(myNodeList) 。 然后使用您最喜歡的數組方法。

var myNodeList = document.querySelectorAll('.my-selector');

// ALT 1
Array.from(myNodeList).forEach(function(el) {
  console.log(el);
});

使用ES6 shim也可以在較舊的瀏覽器中執行此操作。

---

如果您使用的是轉譯器（例如 Babel），還有兩種選擇：

var myNodeList = document.querySelectorAll('.my-selector');

// ALT 2
for (var el of myNodeList) {
  el.classList.add('active'); // or some other action
}

// ALT 3
[...myNodeList].forEach((el) => {
  console.log(el);
});

Answer 3

您可以使用Array原型中的slice方法將其轉換為數組：

var elList = document.querySelectorAll('.viewcount');
elList = Array.prototype.slice.call(elList, 0);

---

此外，如果您只需要forEach ，則可以從Array原型調用它，而無需先將其強制為數組：

var elList = document.querySelectorAll('.viewcount');
Array.prototype.forEach.call(elList, function(el) {
    console.log(el);
});

---

在 ES6 中，您可以使用新的Array.from函數將其轉換為數組：

Array.from(elList).forEach(function(el) {
    console.log(el);
});

這目前僅適用於前沿瀏覽器，但如果您使用的是 polyfill 服務，您將可以全面訪問此功能。

---

如果您使用的是 ES6 轉譯器，您甚至可以使用for..of循環代替：

for (var element of document.querySelectorAll('.some .elements')) {
  // use element here
}

Answer 4

為什么要轉換？ - 直接在元素集合上call Array 的函數；)

[].forEach.call( $('a'), function( v, i) {
    // do something
});

當然，假設$是querySelectorAll的別名

---

編輯：ES6 允許更短的語法[...$('a')] （僅適用於 Firefox，截至 2014 年 5 月）

Answer 5

2020 年更新： nodeList.forEach() 現在是官方標准，並在所有當前瀏覽器中受支持。

較舊的瀏覽器可以使用下面的 polyfill。

要在javascript 中對列表進行操作，例如使用forEach()，必須將NodeList 轉換為數組。

這不是真的。 .forEach()適用於當前瀏覽器。 如果缺少，您可以使用 polyfill 將 .forEach() 從Array添加到NodeList並且它工作正常：

if ( ! NodeList.prototype.forEach ) {
  NodeList.prototype.forEach = Array.prototype.forEach;
}

您現在可以運行：

myNodeList.forEach(function(node){...})

像數組一樣遍歷 NodeList。

這會產生比 .call() 任何地方都更短、更干凈的代碼。

Answer 6

它必須是forEach嗎？ 您可以簡單地使用for循環遍歷列表：

for (var i = 0; i < elementList.length; i++) {
    doSomethingWith(elementlist.item(i));
}

Answer 7

嗯，這也適用於我：

const elements = Object.values( document.querySelector(your selector here) )

Object.values()返回給定對象的值Array 。 NodeList是對象，就像 JS 中的一切一樣。

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/values

但它與 IE 不兼容，所以我猜Array.prototype.*array_method*.call(yourNodeList)是最好的選擇。 有了這個，您可以調用NodeList上的任何數組方法

Answer 8

ES6 允許像var nodeArray = Array.from(nodeList)這樣很酷的方法，但我最喜歡的方法是新的傳播運算符。

var nodeArray = Array(...nodeList);

Answer 9

在 ES6 中對我有用

讓我們假設你有這樣的節點列表

<ul>
  <li data-time="5:17">Flexbox video</li>
  <li data-time="8:22">Flexbox video</li>
  <li data-time="3:24">Redux video</li>
  <li data-time="5:17">Flexbox video</li>
  <li data-time="7:17">Flexbox video</li>
  <li data-time="4:17">Flexbox video</li>
  <li data-time="2:17">Redux video</li>
  <li data-time="7:17">Flexbox video</li>
  <li data-time="9:54">Flexbox video</li>
  <li data-time="5:53">Flexbox video</li>
  <li data-time="7:32">Flexbox video</li>
  <li data-time="2:47">Redux video</li>
  <li data-time="9:17">Flexbox video</li>

</ul>


const items = Array.from(document.querySelectorAll('[data-time]'));

console.log(items);

Answer 10

我使用以下內容是因為我認為它最容易閱讀：

const elements = document.getElementsByClassName('element');
[...elements].forEach((element) => {
   // code
});

Answer 11

打字稿版本：

const allDayElements: Element[] = [].slice.call(document.querySelectorAll('span'));

Answer 12

假設elems是一個 nodeList：

var elems = document.querySelectorAll('select option:checked');

那么它可以變成一個數組，如下所示：

var values = [].map.call(elems, function(obj) {
  return obj.value;
});

參考： https : //developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map#Example : _using_map_genericically_querySelectorAll