原生JS实现循环Nodelist Dom列表的4种方式示例


Posted in Javascript onFebruary 11, 2018

本文实例讲述了原生JS实现循环Nodelist Dom列表的4种方式。分享给大家供大家参考,具体如下:

function $(id) {
 return document.getElementById(id);
}
var _PAGE = {
 timeListDom: $('timeList')
};
var spanDoms = _PAGE.timeListDom.querySelectorAll('span'), domLen = spanDoms.length;
// 第一种方式:原生for循环
for (var i = 0; i < domLen; i++) {
 var v = spanDoms[i];
 // do something you want deal with DOM
}
// 第二种方式:Array 的 forEach函数
Array.prototype.forEach.call(spanDoms, function(v) {
 // do something you want deal with DOM
});
// 第三种方式:Array 的 forEach函数
[].forEach.call(spanDoms, function(el) {
 // do something you want deal with DOM
 el.classList.remove('active');
});
// 第四种方式:继承Array 的 forEach函数
NodeList.prototype.forEach = Array.prototype.forEach;
spanDoms.forEach(function(v) {
 // do something you want deal with DOM
});

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
javascript预览上传图片发现的问题的解决方法
Nov 25 Javascript
JavaScript中的类继承
Nov 25 Javascript
Jquery进度条插件 Progress Bar小问题解决
Jul 12 Javascript
谷歌浏览器调试JavaScript小技巧
Dec 29 Javascript
jQuery中appendTo()方法用法实例
Jan 08 Javascript
jQuery插件zepto.js简单实现tab切换
Jun 16 Javascript
JS实现的另类手风琴效果网页内容切换代码
Sep 08 Javascript
详解Vue中一种简易路由传参办法
Sep 15 Javascript
vue.js,ajax渲染页面的实例
Feb 11 Javascript
vue.js删除列表中的一行
Jun 30 Javascript
Vue CL3 配置路径别名详解
May 30 Javascript
JavaScript中如何对多维数组(矩阵)去重的实现
Dec 04 Javascript
Vue实现点击后文字变色切换方法
Feb 11 #Javascript
Vue-cli中为单独页面设置背景色的实现方法
Feb 11 #Javascript
vue刷新和tab切换实例
Feb 11 #Javascript
详解如何在vue项目中引入elementUI组件
Feb 11 #Javascript
vue-router配合ElementUI实现导航的实例
Feb 11 #Javascript
vue页面跳转后返回原页面初始位置方法
Feb 11 #Javascript
使用vue-router设置每个页面的title方法
Feb 11 #Javascript
You might like
linux下为php添加curl扩展的方法
2011/07/29 PHP
最新用php获取谷歌PR值算法,附上php查询PR值代码示例
2011/12/25 PHP
php获取当前时间的毫秒数的方法
2014/01/26 PHP
PHP使用array_fill定义多维数组的方法
2015/03/18 PHP
PHP内核探索:哈希表碰撞攻击原理
2015/07/31 PHP
php获取微信基础接口凭证Access_token
2018/08/23 PHP
Django中通过定时任务触发页面静态化的处理方式
2018/08/29 PHP
JavaScript之自定义类型
2012/05/04 Javascript
jQuery当鼠标悬停时放大图片的效果实例
2013/07/03 Javascript
jQuery实现表格展开与折叠的方法
2015/05/04 Javascript
详解JavaScript的策略模式编程
2015/06/24 Javascript
JS实现可点击展开与关闭的左侧广告代码
2015/09/02 Javascript
js带缩略图的图片轮播效果代码分享
2015/09/14 Javascript
jQuery中事件与动画的总结分享
2016/05/24 Javascript
常用Javascript函数与原型功能收藏(必看篇)
2016/10/09 Javascript
BootStrap按钮标签及基本样式
2016/11/23 Javascript
BootStrap的select2既可以查询又可以输入的实现代码
2017/02/17 Javascript
详解webpack 配合babel 将es6转成es5 超简单实例
2017/05/02 Javascript
Angular2实现组件交互的方法分析
2017/12/19 Javascript
利用Angular7开发一个Radio组件的全过程
2019/07/11 Javascript
在Vue中使用this.$store或者是$route一直报错的解决
2019/11/08 Javascript
jquery实现直播弹幕效果
2019/11/28 jQuery
Vue循环遍历选项赋值到对应控件的实现方法
2020/06/22 Javascript
一文彻底解决HTML5页面中长按保存图片功能
2019/06/10 HTML / CSS
Hotels.com香港酒店网:你的自由行酒店订房专家
2018/01/22 全球购物
T3官网:头发造型工具
2019/12/26 全球购物
Ruby中的保护方法和私有方法与一般面向对象程序设计语言的一样吗
2013/05/01 面试题
市场营销专业个人自荐信格式
2013/09/21 职场文书
毕业生优秀推荐信
2013/11/26 职场文书
详细的大学生创业计划书模板
2014/01/27 职场文书
市场营销专业毕业生求职信
2014/03/26 职场文书
三行辞职书范文
2015/02/26 职场文书
党支部考察鉴定意见
2015/06/02 职场文书
高中生军训感言
2015/08/01 职场文书
企业法律事务工作总结
2015/08/11 职场文书
小学四年级作文之人物作文
2019/11/06 职场文书