一、前言

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 = '听风是风');

JS nodeList转数组,兼容IE低版本的更多相关文章

  1. AngularJS开发指南7:AngularJS本地化,国际化,以及兼容IE低版本浏览器

    AngularJS本地化,国际化 国际化,简写为i18n,指的是使产品快速适应不同语言和文化. 本地化,简称l10n,是指使产品在特定文化和语言市场中可用. 对开发者来说,国际化一个应用意味着将所有的 ...

  2. WebSocket兼容到低版本浏览器

    就目前而言,WebSocket是最好的Web通信解决方案了.但是IE从10才开始兼容它,对于目前大量IE8存在的市场,原生的WebSocket显然不太实用,我们需要低版本兼容的解决方案.于是我模拟We ...

  3. position:fixed 兼容浏览器低版本

    项目中遇到的坑,写篇博客做个笔记纪念下,position: fixed一般来说都兼容各个浏览器,但是要兼容浏览低版本问题,就得用-webkit-transform: translateZ(0);这段代 ...

  4. 使用socket.io client 开发时兼容IE低版本的办法

    使用socket.io client 开发时兼容IE低版本的办法 socket.io提供了针对各个版本浏览器的‘socket’功能的封转:websocket,长连接,流,flash什么的.给你格式化下 ...

  5. 轮播图采用js、jquery实现无缝滚动和非无缝滚动的四种案例实现,兼容ie低版本浏览器

    项目源代码下载地址:轮播图 以下为项目实现效果:(由于gif太大,所以只上传一张图片,但效果完全能实现,经测试,在ie各版本浏览器及chrome,firefox等浏览器中均能实现效果,可以实现点击切换 ...

  6. js实现抛物线运动 兼容IE低版本(转)

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ...

  7. 本地存储组件--兼容IE低版本

        在前端开发过程中,会用到本地缓存,但是由于浏览器对不同规范支持的程度不一样,每次进行使用都要为兼容行花费不少时间.我整理了一个本地存储的组件.     组件特点: 可以配置使用localSto ...

  8. 如何解决vux不兼容安卓低版本问题

    最近做移动端H5页面用VUX来写UI组件这块.ios测试的时候没啥大问题,不过在4.4版本的华为手机上测试就崩了.接下来详细记述下崩的几个点. 第一:vux自带的提示框,在低版本安卓系统上全不是居中显 ...

  9. html5shiv.min.js 和 respond.min.js 作用(bootstrap做IE低版本兼容时需要用到这两个插件)

    1. html5shiv.min.js解决ie9以下浏览器对html5新增标签的不识别,并导致CSS不起作用的问题. respond.min.js让不支持css3 Media Query的浏览器包括I ...

随机推荐

  1. 小程序css--view标签下英文不换行,中文会自动换行

    英文且没有空格不会自动换行,中文或者有空格的英文会自动换行 这种情况在css中添加 : word-break: break-all;\   就可以解决

  2. 14. pt-kill

    pt-kill h=192.168.100.101,P=3306,u=admin,p=admin \--match-user "user01" \--match-host &quo ...

  3. AI制作icon标准参考线与多面板复制

    新建10个25x25像素,色值为RGB的画板 在视图中打开显示网格 打开首选项参考线和网格,间隔和隔线都设为1 新建一个20x20像素前景色为空描边为1像素的正方形 选择对齐选项中的对齐画板,使之与画 ...

  4. [SoapUI] 检查测试步骤的类型或者或者某种特定类型的步骤列表

    SoapUI Groovy : Check if test step is of specific type, such as : Wsdl, Rest, Jdbc, HTTP, Groovy etc ...

  5. C++ 提取网页内容系列之五 整合爬取豆瓣读书

    工作太忙 没有时间细化了 就说说 主要内容吧 下载和分析漫画是分开的 下载豆瓣漫画页面是使用之前的文章的代码 见http://www.cnblogs.com/itdef/p/4171179.html ...

  6. MYSQL 开发总结

    1.mysql中,VARCHAR(N)中的N代表的是字符数,而不是字节数.例如VARCHAR(255)表示可以保存255的中文 2.过大的长度会消耗更多的内存.VARCHAR(N),存储时是按照数据实 ...

  7. s1 Linux 硬件基础

    s1 Linux硬件基础 服务器特点 1.稳定 2.方便拆卸-模块化 运维职责:运行和维护服务器 1.数据不能丢---大片不能没 2.保证网站7*24小时运行--一直要运行 3.用户体验要好----打 ...

  8. windows下angularJs环境搭建和遇到的问题解决

    搭建本地开发环境 angular官网社区上说:你应该在自己的电脑上本地开发... 你也应该在本地环境学习 Angular. 本人也认为在本地搭建学习环境--靠谱.所以决定尝试一下. 安照中文社区给的步 ...

  9. idea集成tomcat

    1 Tomcat的使用 * Tomcat:web服务器软件 1. 下载:http://tomcat.apache.org/ 2. 安装:解压压缩包即可. * 注意:安装目录建议不要有中文和空格 3. ...

  10. web开发之菜鸟的代码规范

    笔者菜鸟里最不会飞的那个,所以这些基础的习惯都没养成,正好抽时间特意做个笔记以方便自己规范代码, 有兴趣的大佬多多指点. 养成好的编码习惯收益良多, 总结下编码时应注意的细节<借鉴高程里代码约束 ...