原生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 相关文章推荐
dess中一个简单的多路委托的实现
Jul 20 Javascript
formValidator3.3的ajaxValidator一些异常分析
Jul 12 Javascript
jQuery编辑器KindEditor4.1.4代码高亮显示设置教程
Mar 01 Javascript
js 获取radio按钮值的实例
Aug 17 Javascript
通用javascript代码判断版本号是否在版本范围之间
Nov 29 Javascript
微信小程序 自定义对话框实例详解
Jan 20 Javascript
javascript如何用递归写一个简单的树形结构示例
Sep 06 Javascript
vue2.0父子组件间传递数据的方法
Aug 16 Javascript
在vue中使用G2图表的示例代码
Mar 19 Javascript
vue swipe自定义组件实现轮播效果
Jul 03 Javascript
详解Webpack4多页应用打包方案
Jul 16 Javascript
Vue的自定义组件不能使用click方法的解决
Jul 28 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
Yii使用CLinkPager分页实例详解
2014/07/23 PHP
php获取本周开始日期和结束日期的方法
2015/03/09 PHP
windows7配置Nginx+php+mysql的详细教程
2016/09/04 PHP
Yii2-GridView 中让关联字段带搜索和排序功能示例
2017/01/21 PHP
使用SMB共享来绕过php远程文件包含的限制执行RFI的利用
2019/05/31 PHP
比较详细的关于javascript 解析json的代码
2009/12/16 Javascript
js单向链表的具体实现实例
2013/06/21 Javascript
详细介绍8款超实用JavaScript框架
2013/10/25 Javascript
JavaScript 判断用户输入的邮箱及手机格式是否正确
2013/12/08 Javascript
JS中的form.submit()不能提交表单的错误原因
2014/10/08 Javascript
jquery插件NProgress.js制作网页加载进度条
2015/06/05 Javascript
JavaScript代码实现图片循环滚动效果
2020/03/19 Javascript
JavaScript关于提高网站性能的几点建议(一)
2016/07/24 Javascript
JS正则替换去空格的方法
2017/03/24 Javascript
JavaScript 用fetch 实现异步下载文件功能
2017/07/21 Javascript
angularjs实现简单的购物车功能
2017/09/21 Javascript
使用Vue完成一个简单的todolist的方法
2017/12/01 Javascript
在create-react-app中使用sass的方法示例
2018/10/01 Javascript
javascript实现移动端红包雨页面
2020/06/23 Javascript
[01:03:27]Optic vs VGJ.S 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
Python threading多线程编程实例
2014/09/18 Python
Python内置函数之filter map reduce介绍
2014/11/30 Python
浅谈python中的__init__、__new__和__call__方法
2017/07/18 Python
Python使用Dijkstra算法实现求解图中最短路径距离问题详解
2018/05/16 Python
Python多继承原理与用法示例
2018/08/23 Python
Python 元组操作总结
2019/09/18 Python
JupyterNotebook 输出窗口的显示效果调整方法
2020/04/13 Python
记录一下scrapy中settings的一些配置小结
2020/09/28 Python
详解修改Anaconda中的Jupyter Notebook默认工作路径的三种方式
2021/01/24 Python
台湾前三大B2C购物网站:MOMO购物网
2017/04/27 全球购物
知识竞赛拉拉队口号
2014/06/16 职场文书
临时工聘用合同协议书
2014/10/29 职场文书
学校社团活动总结
2015/05/07 职场文书
办公室主任岗位竞聘书
2015/09/15 职场文书
搞笑Gif:这么白这么长的腿像极了一楼的女朋友
2022/03/21 杂记
mysql 8.0.27 绿色解压版安装教程及配置方法
2022/04/20 MySQL