极客笔记JavaScript 如何将DOM节点列表转换为数组
为了编写高级JavaScript代码，您可能会遇到需要将DOM（文档对象模型）节点列表转换为更适应的数据结构，如数组。尽管节点列表在任何编程语言中都类似于数组，但它不具备比数组更多的特性。
您可以使用JavaScript将节点列表转换为数组以更适当地工作。
示例1
本示例提供了使用JavaScript将节点列表转换为数组的代码。该代码使用nodeListToArray函数执行转换。
步骤
步骤1： 在JavaScript中创建一个数组。该数组必须为空，以便在下一步中将数据推入其中。
步骤2： 现在，使用 push() 方法将节点列表中包含的值添加到数组中。
步骤3： 在将所有元素添加到数组后，执行return来处理数组的返回。
步骤4： 使用 querySelectorAll() 方法测试所有元素是否在数组中转换。
步骤5： 在控制台中检查数组，以测试元素是否在正确的位置，并且是否被复制到数组中。
示例
<!DOCTYPE html>
<html>
<head>
<title>NodeList to Array</title>
</head>
<body>
<h1> Heading 1</h1>
<h1>Heading 2</h1>
<script>
document.addEventListener('DOMContentLoaded', function() {
var nodeList = document.querySelectorAll('h1');
var array = Array.from(nodeList);
console.log(array);
});
</script>
</body>
</html>
示例2
前面的示例是将nodelist转换成数组的最基本方法。在这个示例中，我们将使用两个nodelist将数据转换成两个数组。第二个节点的转换方法是相同的，只是你必须构建两个nodelists和两个数组。此外，你必须执行两次log函数。
步骤
步骤1： 在JavaScript中创建两个数组，并将数组设置为空，这样我们可以将数据从nodelist中复制出来。
步骤2： 现在将nodelist 1的值添加到数组 1中，将nodelist 2的值添加到数组 2中。
步骤3： 将所有元素添加到数组中后，返回它们。
步骤4： 现在两次运行 queryselectorall() 方法，测试两个nodelist的元素是否被转换。
步骤5： 运行代码以检查控制台中的数组。现在你将在控制台上看到两个数组，显示每个数组的元素数量和元素。
示例
<!DOCTYPE html>
<html>
<head>
<title>Convert DOM NodeList to Array</title>
</head>
<body>
<p>abc</p>
<p>abc</p>
<p>abc</p>
<p>abc</p>
<p>abc</p>
<p>abc</p>
<p>abc</p>
<p>abc</p>
<h1> Heading 1</h1>
<h1>Heading 2</h1>
<script>
document.addEventListener('DOMContentLoaded', function() {
var nodeList1 = document.querySelectorAll('h1');
var array1 = Array.from(nodeList1);
var nodeList2 = document.querySelectorAll('p');
var array2 = Array.from(nodeList2);
console.log(array1);
console.log(array2);
});
</script>
</body>
</html>
结论
当使用DOM时，将DOM NodeList转换为JavaScript中的数组是一种典型的过程。我们可以通过使用一种简单的算法和代码来进行这种转换。在本文中，我们将两个nodelist转换为两个数组。每个nodelist都转换了不同类型的项目。同样，您可以使用任意数量的nodelist和任何类型的数据。
结果数组提供了更广泛的数组属性集，使得数据处理和操作更加容易。虽然您也可以使用一些额外的方法来进行相同的转换，例如Array.from（）或spread operator。但是，这里讨论的方法是最简单的。