JS nodeList转数组,兼容IE低版本
一、前言
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低版本的更多相关文章
- AngularJS开发指南7:AngularJS本地化,国际化,以及兼容IE低版本浏览器
AngularJS本地化,国际化 国际化,简写为i18n,指的是使产品快速适应不同语言和文化. 本地化,简称l10n,是指使产品在特定文化和语言市场中可用. 对开发者来说,国际化一个应用意味着将所有的 ...
- WebSocket兼容到低版本浏览器
就目前而言,WebSocket是最好的Web通信解决方案了.但是IE从10才开始兼容它,对于目前大量IE8存在的市场,原生的WebSocket显然不太实用,我们需要低版本兼容的解决方案.于是我模拟We ...
- position:fixed 兼容浏览器低版本
项目中遇到的坑,写篇博客做个笔记纪念下,position: fixed一般来说都兼容各个浏览器,但是要兼容浏览低版本问题,就得用-webkit-transform: translateZ(0);这段代 ...
- 使用socket.io client 开发时兼容IE低版本的办法
使用socket.io client 开发时兼容IE低版本的办法 socket.io提供了针对各个版本浏览器的‘socket’功能的封转:websocket,长连接,流,flash什么的.给你格式化下 ...
- 轮播图采用js、jquery实现无缝滚动和非无缝滚动的四种案例实现,兼容ie低版本浏览器
项目源代码下载地址:轮播图 以下为项目实现效果:(由于gif太大,所以只上传一张图片,但效果完全能实现,经测试,在ie各版本浏览器及chrome,firefox等浏览器中均能实现效果,可以实现点击切换 ...
- js实现抛物线运动 兼容IE低版本(转)
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ...
- 本地存储组件--兼容IE低版本
在前端开发过程中,会用到本地缓存,但是由于浏览器对不同规范支持的程度不一样,每次进行使用都要为兼容行花费不少时间.我整理了一个本地存储的组件. 组件特点: 可以配置使用localSto ...
- 如何解决vux不兼容安卓低版本问题
最近做移动端H5页面用VUX来写UI组件这块.ios测试的时候没啥大问题,不过在4.4版本的华为手机上测试就崩了.接下来详细记述下崩的几个点. 第一:vux自带的提示框,在低版本安卓系统上全不是居中显 ...
- html5shiv.min.js 和 respond.min.js 作用(bootstrap做IE低版本兼容时需要用到这两个插件)
1. html5shiv.min.js解决ie9以下浏览器对html5新增标签的不识别,并导致CSS不起作用的问题. respond.min.js让不支持css3 Media Query的浏览器包括I ...
随机推荐
- no.1 voice
1. import win32com.client text="hello world" speaker = win32com.client.Dispatch("SAPI ...
- exchange 2010 数据库管理
1. 查看数据库中空白空间 Get-MailboxDatabase databasename -Status | FL AvailableNewMailboxSpace 2.卸载数据库 Dismoun ...
- 设计模式 策略模式2 c++11
根据需求的不同 选择不同的策略算法 之前是保存的各种策略类的指针 这里直接使用 function bind 选择对应的算法 代码 // 005.cpp: 定义控制台应用程序的入口点. // #inc ...
- windows内核对象管理学习笔记
目前正在阅读毛老师的<windows内核情景分析>一书对象管理章节,作此笔记. Win内核中是使用对象概念来描述管理内核中使用到的数据结构.此对象(Object)均是由对象头(Object ...
- [C#.net]未在本地计算机上注册“microsoft.ACE.oledb.12.0”提供程序
C#操作Execl文件常用的2种方式是NPOI和Microsoft.Jet.OleDb,前者需要引用dll,后者需要安装Office客户端 今天发现别人电脑使用Microsoft.Jet.OleDb能 ...
- 使用android访问SQLServer数据库
1.SQL驱动 下载可以支持android的SQL驱动,下载地址http://sourceforge.net/projects/jtds/files/ 注意只能下载1.2.7版本.android不支持 ...
- Java集合:LinkedList源码解析
Java集合---LinkedList源码解析 一.源码解析1. LinkedList类定义2.LinkedList数据结构原理3.私有属性4.构造方法5.元素添加add()及原理6.删除数据re ...
- UVa 11645 Bits (暴力+组合数学)
题意:给定一个数 n,求 0 ~ n,中二进制表示中连续两个 1 出现的次数. 析:枚举连续的两个 1,从低位向高位进行枚举,然后前可以是任意数,后面也是任意的,如果 n 正好是 11 还要另算,举个 ...
- Hiberbate注解
JPA:出现后,所有的ORM框架都有@注解 ,在所有的ORM框架里面是通用的,因此一般是建议大家使用注解进行配置. 实体类一般都有唯一属性,普通属性,集合属性 如何体现ORM思想的? @Entity ...
- HTK计算mfcc/filter_bank源码解析
HTK计算mfcc/filter_bank源码解析 HTK可以用简单的 HCopy -C config -s scp 求取mfcc或者filter_bank 关于mfcc的原理在 http://my. ...