DOM JS 中的节点到数组，它是如何工作的？

Question

我只是作为初学者才发现 DOM，现在我有点困惑。

我在一篇文章中读到，nodeList 只是一个类似数组的元素 - 它在控制台中显示为一个数组，但不可能在其上使用数组方法（如 forEach 或 map）。但是当我尝试这个时（在用 JS 制作的 table 中，函数 table()）：

let node = document.querySelectorAll('td')

node.forEach(function(node){
  node.style.border = 'thin solid #000';
  node.textContent = 'cell';
console.log(node);
})

它如我所愿地工作 - 作为一个数组。

除此之外，这段代码只创建了一个空数组，里面没有 nodeList:

 let node = document.querySelectorAll('td')
 let nodeToArray = Array.apply(node);

 console.log(nodeToArray);

我尝试了传播运算符：

let nodeToArray = [document.querySelectorAll('td')]

它把 nodeList 变成了数组，但只有一个数字——可能是通过循环创建 td 造成的？

当然，forEach 方法不适用于 "Cannot set property 'border' of undefined."

let nodeToArray = [document.querySelectorAll('td')]
  nodeToArray.forEach(function(nodeToArray){
    nodeToArray.style.border = 'thin solid #000';
    nodeToArray.textContent = 'cell';
console.log(nodeToArray);

那么，我应该如何将 nodeList 更改为数组？或者是否有可能更多地使用 nodeList，因为它是数组？（我想创建棋盘，因此我需要将此数组用于 if-else 条件语句来生成 odd/even 个单元格。）

Answer 1

您需要在实际 Array object. You can use Array.from 中转换 node 才能做到这一点：

const nodes = document.querySelectorAll('div')
const nodesArray = Array.from(nodes)
nodesArray.forEach(console.log)

如有疑问，您可以使用Array.isArray检查对象是否为数组：

const nodes = document.querySelectorAll('div')
console.log(Array.isArray(nodes)) // false

const nodesArray = Array.from(nodes)
console.log(Array.isArray(nodesArray)) // true

Answer 2

在我的回答中，我认为我会包括多种方法，ES5 和 ES6 的混合，这里有几个简单的方法可以实现这一点。

根据 MDN docs 中的建议，如果您想要 any 支持 IE，您需要使用我提供的第一个实现，如果您不太担心支持旧版浏览器，您可以轻松使用我提供的任一 ES6 解决方案。

我个人更喜欢使用 destructuring 方法，但每个方法都有自己的方法。

// ES5
var notArray = document.querySelectorAll("input");
var array = Array.prototype.slice.call(notArray);

// ES6 
const notArray1 = document.querySelectorAll("input");
const array1 = [...notArray1];
const array2 = Array.from(notArray1);

// Tests
console.log(Array.isArray(array));
console.log(Array.isArray(array1));
console.log(Array.isArray(array2));

console.log(Array.isArray(notArray));
console.log(Array.isArray(notArray1));

<input>
<input>
<input>
<input>
<input>
<input>

DOM JS 中的节点到数组，它是如何工作的？

Node to Array in DOM JS, how it works?

javascript

arrays

dom

nodelist