原生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 相关文章推荐
js 函数的执行环境和作用域链的深入解析
Nov 01 Javascript
js获取网页可见区域、正文以及屏幕分辨率的高度
May 15 Javascript
JS实现关键字搜索时的相关下拉字段效果
Aug 05 Javascript
Javascript表单验证要注意的事项
Sep 29 Javascript
jQuery循环动画与获取组件尺寸的方法
Feb 02 Javascript
jQuery获得指定元素坐标的方法
Apr 14 Javascript
jQuery简单动画变换效果实例分析
Jul 04 Javascript
JavaScript反射与依赖注入实例详解
May 29 Javascript
详解解决使用axios发送json后台接收不到的问题
Jun 27 Javascript
angularJS自定义directive之带参方法传递详解
Oct 09 Javascript
vue-cli 项目打包完成后运行文件路径报错问题
Jul 19 Javascript
手把手15分钟搭一个企业级脚手架
Sep 16 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
关于PHP模板Smarty的初级使用方法以及心得分享
2013/06/21 PHP
php设计模式之单例模式使用示例
2014/01/20 PHP
ThinkPHP分组下自定义标签库实例
2014/11/01 PHP
PHP实现二叉树的深度优先与广度优先遍历方法
2015/09/28 PHP
PHP连接MySQL数据库的三种方式实例分析【mysql、mysqli、pdo】
2019/11/04 PHP
javaScript 利用闭包模拟对象的私有属性
2011/12/29 Javascript
jquery插件珍藏(图片局部放大/信息提示框)
2013/01/08 Javascript
JavaScript动态插入script的基本思路及实现函数
2013/11/11 Javascript
javascript关于运动的各种问题经典总结
2015/04/27 Javascript
jquery实现仿Flash的横向滑动菜单效果代码
2015/09/17 Javascript
基于jQuery Bar Indicator 插件实现进度条展示效果
2015/09/30 Javascript
JS实现的驼峰式和连字符式转换功能分析
2016/12/21 Javascript
jquery实现手机端单店铺购物车结算删除功能
2017/02/22 Javascript
vue+vuex+axio从后台获取数据存入vuex实现组件之间共享数据
2017/04/22 Javascript
Vue中全局变量的定义和使用
2019/06/05 Javascript
[04:09]2014DOTA2国际邀请赛Ti西雅图 历届冠军相继出局 BBC综述今日比赛
2014/07/20 DOTA
[01:06:42]VP vs NewBee Supermajor 胜者组 BO3 第二场 6.5
2018/06/06 DOTA
[08:38]DOTA2-DPC中国联赛 正赛 VG vs Elephant 选手采访
2021/03/11 DOTA
pydev使用wxpython找不到路径的解决方法
2013/02/10 Python
python 字符串转列表 list 出现\ufeff的解决方法
2017/06/22 Python
Python Unittest根据不同测试环境跳过用例的方法
2018/12/16 Python
python plotly绘制直方图实例详解
2019/07/22 Python
Python实现Wordcloud生成词云图的示例
2020/03/30 Python
使用python爬取抖音app视频的实例代码
2020/12/01 Python
python爬虫看看虎牙女主播中谁最“顶”步骤详解
2020/12/01 Python
css3背景图片透明叠加属性cross-fade简介及用法实例
2013/01/08 HTML / CSS
HTML5实现无刷新修改URL的方法
2019/11/14 HTML / CSS
建材业务员岗位职责
2013/12/08 职场文书
自我评价范文分享
2014/01/04 职场文书
体操比赛口号
2014/06/10 职场文书
运动会横幅标语
2014/06/17 职场文书
单方离婚协议书范本(2014版)
2014/09/30 职场文书
项目经理岗位职责范本
2015/04/01 职场文书
2016年领导干部廉政承诺书
2016/03/24 职场文书
2020年元旦晚会策划书模板
2019/12/30 职场文书
详解Python中的for循环
2022/04/30 Python