原生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 相关文章推荐
JQuery困惑—包装集 DOM节点
Oct 16 Javascript
jquery中的mouseleave和mouseout的区别 模仿下拉框效果
Feb 07 Javascript
写自已的js类库需要的核心代码
Jul 16 Javascript
利用JQuery和JS实现奇偶行背景颜色自定义效果
Nov 19 Javascript
js格式化货币数据实现代码
Sep 04 Javascript
JS对HTML标签select的获取、添加、删除操作
Oct 17 Javascript
js showModalDialog弹出窗口实例详解
Jan 07 Javascript
详解AngularJS 路由 resolve用法
Apr 24 Javascript
快速掌握jquery分页插件jqPaginator的使用方法
Aug 09 jQuery
解决Vue在封装了Axios后手动刷新页面拦截器无效的问题
Nov 08 Javascript
Vue绑定用户接口实现代码示例
Nov 04 Javascript
VUE项目实现主题切换的多种方法
Nov 26 Vue.js
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实现用户认证及管理完全源码
2007/03/11 PHP
优化WordPress中文章与评论的时间显示
2016/01/12 PHP
jQuery学习笔记 操作jQuery对象 属性处理
2012/09/19 Javascript
javascript数组去重3种方法的性能测试与比较
2013/03/26 Javascript
jquery获取当前点击对象的value方法
2014/02/28 Javascript
JavaScript实现在页面间传值的方法
2015/04/07 Javascript
JS实现超简单的鼠标拖动效果
2015/11/02 Javascript
jQuery判断浏览器并动态调整select宽度的方法
2016/03/02 Javascript
基于zepto.js简单实现上传图片
2016/06/21 Javascript
jQuery组件easyui对话框实现代码
2016/08/25 Javascript
基于JavaScript实现自动更新倒计时效果
2016/12/19 Javascript
jQuery电话号码验证实例
2017/01/05 Javascript
webpack2.0配置postcss-loader的方法
2017/08/17 Javascript
JQuery选中select组件被选中的值方法
2018/03/08 jQuery
原生JS实现动态加载js文件并在加载成功后执行回调函数的方法
2020/12/30 Javascript
vue中进入详情页记住滚动位置的方法(keep-alive)
2018/09/21 Javascript
解决ng-repeat产生的ng-model中取不到值的问题
2018/10/02 Javascript
详解Vue的常用指令v-if, v-for, v-show,v-else, v-bind, v-on
2018/10/12 Javascript
解决vue的touchStart事件及click事件冲突问题
2020/07/21 Javascript
NumPy 基本切片和索引的具体使用方法
2019/04/24 Python
Win10系统下安装labelme及json文件批量转化方法
2019/07/30 Python
基于python实现操作redis及消息队列
2020/08/27 Python
python Matplotlib数据可视化(2):详解三大容器对象与常用设置
2020/09/30 Python
使用phonegap播放音频的实现方法
2017/03/31 HTML / CSS
亚瑟士美国官网:ASICS美国
2017/02/01 全球购物
Java里面Pass by value和Pass by Reference是什么意思
2016/05/02 面试题
运动会方阵解说词
2014/02/12 职场文书
总经理的岗位职责
2014/02/23 职场文书
物业总经理助理岗位职责
2014/06/29 职场文书
市场营销专业毕业生求职信
2014/07/21 职场文书
2014党员民主评议个人思想剖析发言
2014/09/19 职场文书
体育活动总结
2015/02/04 职场文书
Python基础之tkinter图形化界面学习
2021/04/29 Python
浅谈Python中的函数(def)及参数传递操作
2021/05/25 Python
MySQL千万级数据表的优化实战记录
2021/08/04 MySQL
解决spring.thymeleaf.cache=false不起作用的问题
2022/06/10 Java/Android