NodeList转换为Array数组【2021.11.7]

最新推荐文章于 2024-06-23 21:02:08 发布

轻盈的风

最新推荐文章于 2024-06-23 21:02:08 发布

阅读量2.4k

点赞数 2

文章标签： list javascript es6

本文链接：https://blog.csdn.net/masierty/article/details/121198486

版权

这篇博客介绍了如何判断NodeList是否为数组以及如何将其转换为Array。通过示例展示了使用扩展运算符、Array.from()方法以及手动遍历赋值的转换方式，帮助开发者更好地理解和操作DOM获取的元素集合。

摘要由CSDN通过智能技术生成

首先我们得区分NodeList是不是数组？

可以用Array.isArray(NodeList)判断是不是数组

例子：

let imgs = document.querySelectorAll('.layer img');
  console.log(imgs);//NodeList(15) [ img, img, img, img, img, img, img, img, img, img, … ]
  console.log(Array.isArray(imgs));//false

我们可以看到结果是false，NodeList称为伪数组，因为它是DOM操作得到的元素集合，但又具有数组的部分属性，如length和索引。

接下来分享一下如何将NodeList转换为Arrays数组：

第一种是我最喜欢的方法也是最简单的方法，利用...扩展运算符

 imgs = [...imgs];
  console.log(imgs);//Array(15) [ img, img, img, img, img, img, img, img, img, img, … ]
  console.log(Array.isArray(imgs));//true

第二种是利用Array.from()

let imgArray = Array.from(document.querySelectorAll('.layer img'));
  console.log(imgArray);//Array(15) [ img, img, img, img, img, img, img, img, img, img, … ]

第三种就是遍历NodeList,赋值给数组

let imgArrayB = [];
  for(var i =0;i<imgs.length;i++){
    imgArrayB.push(imgs[i]);
  }
  console.log(imgArrayB);//Array(15) [ img, img, img, img, img, img, img, img, img, img, … ]