在javascript中把节点列表转换为数组的教程（附实例）

NodeList 是一个javascript内置的DOM对象，持有html文档节点的集合。它代表了用于选择和修改DOM元素的文档节点的集合。

Array 是普通对象的集合。NodeList代表集合，但在2020年之前，没有像Array那样的过滤或迭代方法来进行操作。

NodeList在2020年DOM规范中引入了forEach 方法。这篇文章包括在Nodelist中进行数组类操作的可能方法。

NodeList对象

NodeList是一个由document.querySelector() 方法返回的对象。

例如，在一个表单中，如果你有五个输入文本字段，document.querySelector(input:text) 方法用于选择输入字段并返回NodeList ，这里，querySelector DOM方法用于根据css选择器类来选择元素。

直接操作和迭代节点列表是非常困难的，因此开发者必须将nodelist 转为Array 。

有多种方法，我们可以做convert nodelist to array in javascrit/es6 。

NodeList Iteration可以用于以下使用情况

• 多选下拉选择的元素
• 输入元素
• 选择多个DIV选择器
• 选择 html 表格的 td,tr

让我们声明html元素，并测试每个方法如何迭代nodelist

在下面的例子中，使用li 元素显示项目的列表。

 <ul>
        <li>item1</li>
        <li>item2</li>
        <li>item3</li>
        <li>item4</li>
        <li>item5</li>
        <li>item6</li>
</ul>

forEach 内置方法

forEach是2020年所有最新的浏览器中引入的NodeList中的一个内置方法。旧的浏览器并不支持这个方法。

要在旧的浏览器中进行迭代，请使用以下方法

• 使用polyfill
• 阅读旧版浏览器中的其他方法

你可以找到更多关于(NodeList foreach)[developer.mozilla.org/en-US/docs/…

NodeList.forEach(callbackfunction) or
NodeList.forEach(function(currentitem, currentindex, nodeListObject) {
    // iteration code
});

为每个元素调用回调函数，并接受三个参数 current item - 当前在nodelist游标中指向的项目 current index - 当前对象索引，可选 nodeListObject - 适用于每个元素的对象列表，供操作使用。

const liListNodes = document.querySelectorAll('li')
        console.log(liListNodes) // NodeList Array
        liListNodes.forEach(function(item, index, newobject) {
            console.log(item)
        });

而输出结果是

NodeList(6) [li, li, li, li, li, li]
<li>​…​</li>​
<li>​…​</li>​
<li>​…​</li>​
<li>​…​</li>​
<li>​…​</li>​
<li>​…​</li>​

ES5 Nodelist转换使用切片

这是用于ES5语言的方法slice ，用于将节点列表转换为数组。

const liListNodes = document.querySelectorAll('li')
var array = Array.prototype.slice.call(liListNodes);
console.log(Array.isArray(array)) // true

ES6节点列表数组例子

在最新的javascript中，以下方法被用来转换为数组。这只适用于温和的浏览器。

传播操作符

(spread operator)[www.cloudhadoop.com/2018/08/es6…] 是最新加入ES6最新的javascript。

const liListNodes = document.querySelectorAll('li')
const liArray = [...liListNodes];
console.log(Array.isArray(liArray)) // true

最后，这只适用于现代浏览器

数组从方法

Array.from 从一个字符串或一个对象中创建一个数组。这是在 ES6中引入的from方法，可以与任何存在长度或迭代的对象一起工作。

Array.from(object/string)

这是转换为数组的简单方法，然而，它只适用于最新的浏览器 在DOM操作中，document.querySelector(li) ，用来选择所有的元素并返回NodeList 。

这：

const liListNodes = document.querySelectorAll('li')
console.log(liListNodes) // NodeList Array input.html:9 NodeList(6) [li, li, li, li, li, li]
console.log(Array.isArray(liListNodes)) // returns false

const liArray = Array.from(liListNodes)
console.log(Array.isArray(liArray)) // returns true