数据结构
网络
关系型数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
时尚研究
法律研究如何使用 JavaScript 将 DOM NodeList 转换为数组？
在编写高级 JavaScript 代码时，您可能会遇到需要将 DOM（文档对象模型）NodeList 转换为更易于处理的数据结构（如数组）的情况。尽管 NodeList 在任何编程语言中都类似于数组。但是，它并不包含比数组更多的特性。
您可以使用 Javascript 将 NodeList 转换为数组以更有效地工作。
示例 1
此示例提供将 NodeList 转换为数组的 JavaScript 代码。该代码使用 nodeListToArray 函数执行转换。
算法
步骤 1：在 JavaScript 中创建一个数组。该数组必须为空，以便我们可以在后续步骤中将数据推入其中。
步骤 2：现在使用 push() 方法将 NodeList 中包含的值添加到数组中。
步骤 3：将所有元素添加到数组后，执行返回以处理数组的返回值。
步骤 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 将数据转换为两个数组。第二个 Node 的转换方法相同，只是您必须构建两个 NodeList 和两个数组。此外，您必须执行两次日志函数。
算法
步骤 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() 或扩展运算符。但是，本文讨论的方法是最简单的。
561 次查看
