JS nodeList转数组，兼容IE低版本

风晓 2024-01-01 19:43:46  51631 赞同 0 反对 0

分类：资源

一、前言

nodeList转数组貌似很少会这样去操作，但我在做图片懒加载时，我获取了所有需要做懒加载的img元素，也就是一个NodeList对象，打个比方：

对这些元素进行src修改后，我想将此项从NodeList中删除掉，毕竟是操作dom的行为，我不想每次加载完成还在反复操作这堆dom节点。

//这样加载完成scroll再怎么执行都不会再触发
function replaceUrl() {
  if(nodeList.len){
    nodeList.forEach(function (self, index) {
      //替换图片
      self.url = "xxxx"
      //操作完就删除掉此项
      nodeList.splice(index,1);
    })
  };
};
parent.addEventListener("scroll",replaceUrl);

很明显，NodeList长得像数组，有length，能通过NodeList["索引"]读取某个元素，但它确实不是数组，NodeList对象是一个节点的集合，它不支持数组方法使用，那么怎么转换数组方便操作呢？

二、nodeList转数组

在网上找了个比较简单的方法

  function nodeListToArr(data) {
    var arr = [];
    try{
      //ie8及以下不支持
      arr = Array.prototype.slice.call(data);
    }catch(e){
      //兼容写法
      var len = data.length;
      for(var i = 0; i < len; i++){
        arr.push(data[i]);
      }
    };
    return arr;
  };

之所以写了下面一种方式是因为，IE8及以下版本中的NodeList是一个com对象，因此并不支持JS方法，会报错。

2019.6.2新增ES6写法，数组拓展运算符的使用：

let P = document.querySelectorAll('p');
//获取页面所有p元素并修改文本内容
[...P].forEach(ele => ele.innerHTML = '听风是风');

如果您发现该资源为电子书等存在侵权的资源或对该资源描述不正确等，可点击“私信”按钮向作者进行反馈；如作者无回复可进行平台仲裁，我们会在第一时间进行处理！

评价 0 条

相关资源

Java数组 2023-12-28 51391 浏览
数组是：同一种类型数据的集合，是一个容器。
固定长度数组 2023-12-31 51356 浏览
固定长度数组可以具有任意存储类别：可以将它们定义在所有函数的外面或语句块的里面，并且可以使用或不使用存储类修饰符 static。唯一的限制是数组不能作为函数参数。一个传入函数的数组参数需要被转换为指向数组第一个元素的指针。
C/C++ 反汇编：多维数组与指针 2023-12-30 49680 浏览
反汇编即把目标二进制机器码转为汇编代码的过程，该技术常用于软件破解、外挂技术、病毒分析、逆向工程、软件汉化等领域，学习和理解反汇编对软件调试、系统漏洞挖掘、内核原理及理解高级语言代码都有相当大的帮助，软件一切神秘的运行机制全在反汇编代码里面。
Net 高级调试之六：对象检查之值类型、引用类型、数组和异常的转储 2023-12-29 49898 浏览
一、简介　　　　　今天是《Net 高级调试》的第六篇文章。记得我刚接触 Net 框架的时候，还是挺有信心的，对所谓的值类型和引用类型也能说出自己的见解，毕竟，自己一直在努力。当然这些见解都是书本上的，并没有做到眼见为实，所以总是有些东西说不清楚。今天，我们就好好的说说 C# 的类型，是从内存级别、从底层来说一下值类型、引用类型到底是什么，它们在内存中的形态，还有也说说数组的内存形态，如何内部布局的，以及我们如何查找由未捕捉的异常引起的程序崩溃。这些都是基础的，如果这些掌握不好，以后的高级调试的道路，也不好走。自从我过了这一关，很多东西理解起来，比较透彻了，但是，还必须努力。当然了，第一次看视频或者看书，是很迷糊的，不知道如何操作，还是那句老话，一遍不行，那就再来一遍，还不行，那就再来一遍，俗话说的好，书读千遍，其意自现。　　　　　如果在没有说明的情况下，所有代码的测试环境都是 Net Framewok 4.8，但是，有时候为了查看源码，可能需要使用 Net Core 的项目，我会在项目章节里进行说明。好了，废话不多说，开始我们今天的调试工作。　　　　调试环境我需要进行说明，以防大家不清楚，具体情况我已经罗列出来。　　　　　　　　　　操作系统：Windows Professional 10 　　　　　　　　　　调试工具：Windbg Preview（可以去Microsoft Store 去下载）　　　　　　　　　　开发工具：Visual Studio 2022 　　　　　　　　　　Net 版本：Net Framework 4.8 　　　　　　　　　　CoreCLR源码：源码下载
C语言一维数组的定义 2023-12-31 46981 浏览
数组包含给定类型的一些对象，并将这些对象依次存储在连续的内存空间中。每个独立的对象被称为数组的元素（element）。元素的类型可以是任何对象类型，但函数类型或不完整类型不能作为数组元素。
数组作为返回值 2023-12-28 52418 浏览
同时返回两个值，python中return a,b 的话是返回元祖，java可以封装一下返回数组，返回集合等等。返回的是地址值，main里接收到的也是地址值。
Flatten Nested Arrays（展平嵌套数组） 2023-12-30 48639 浏览
中文描述题目要求比较简单：[1,2,[3],[[4]],5,6] -> [1,2,3,4,5,6] 就是数组中嵌套数组，考察一个数组[1,2,[3],[[4]],5,6]。你怎么能够输出 1,2,3,4,5,6（并不要求按照顺序输出）。这里是一个嵌套数组，你需要将这个数组中的值全部取出来。
适配器模式：如何让不兼容的接口变得兼容 2023-12-30 51157 浏览
在软件开发中，我们经常会遇到这样的情况：我们需要使用一个现有的类或者接口，但它与我们系统的目标接口不兼容，而我们又不能修改它。这时候，我们该怎么办呢？大多数情况下我们都可以使用适配器模式来解决这个问题，本文将从以下四个方面讲解适配器模式。简介优缺点应用场景 Java 代码示例
点图形化配置网络提示“系统的网络服务与此版本的网络管理器不兼容”？ 2023-12-26 51484 浏览
点图形化配置网络提示“系统的网络服务与此版本的网络管理器不兼容”？
检查JS数组中的每个值是否满足条件？ 2023-12-25 50174 浏览
我们直接来看一个案例： var arr = [ { name: '张三', age: 30 }, { name: '李四', age: 25 } ];

JS nodeList转数组，兼容IE低版本

相关资源

关注我们