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更改为array？还是有可能与nodeList一起使用，因为它是数组？（我想创建棋盘，因此需要将此数组用于if-else条件语句以生成奇/偶单元格。）

Answer 1

您需要将node转换为实际的Array object。您可以使用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

Answer 2

在我的回答中，我认为我将包括多种方法，ES5和ES6的混合，这是您可以实现此目的的几种简单方法。

根据MDN docs中的建议，如果您想对IE提供任何支持，那么如果您不希望使用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中的节点到数组，它是如何工作的？

2 个答案: