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

Question

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

我在一篇文章中读到，nodeList 只是一个类似数组的元素——它在控制台中显示为一个数组，但不可能在其上使用数组方法(如 forEach 或 map)。但是当我尝试这个时(在用 JS 制作的表中，函数 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 方法不适用于“无法设置未定义的属性‘border’。”

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 条件语句来制作奇数/偶数单元格。)

Answer 1

您需要在实际 Array object 中转换 node .您可以使用 Array.from这样做:

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