原生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 播放器 控制
Jan 22 Javascript
javascript元素动态创建实现方法
May 13 Javascript
在JavaScript中用getMinutes()方法返回指定的分时刻
Jun 10 Javascript
z-blog SyntaxHighlighter 长代码无法换行解决办法(基于jquery)
Nov 18 Javascript
BootStrap实现带有增删改查功能的表格(DEMO详解)
Oct 26 Javascript
解决微信内置浏览器返回上一页强制刷新问题方法
Feb 05 Javascript
JavaScript实现图片切换效果
Aug 12 Javascript
2019 年编写现代 JavaScript 代码的5个小技巧(小结)
Jan 15 Javascript
TypeScript开发Node.js程序的方法
Apr 30 Javascript
通过说明与示例了解js五种设计模式
Jun 17 Javascript
npm的lock机制解析
Jun 20 Javascript
15 分钟掌握vue-next响应式原理
Oct 13 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 什么是PEAR?
2009/03/19 PHP
php中通过curl smtp发送邮件
2012/06/05 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(八)
2014/06/23 PHP
php实现模拟post请求用法实例
2015/07/11 PHP
thinkphp多表查询两表有重复相同字段的完美解决方法
2016/09/22 PHP
详解Yii2 之 生成 URL 的方法
2017/06/16 PHP
Yii1.1框架实现PHP极光推送消息通知功能
2018/09/06 PHP
php使用redis的有序集合zset实现延迟队列应用示例
2020/02/20 PHP
Javascript写了一个清除“logo1_.exe”的杀毒工具(可扫描目录)
2007/02/09 Javascript
左右悬浮可分组的网站QQ在线客服代码(可谓经典)
2012/12/21 Javascript
node.js中的fs.createWriteStream方法使用说明
2014/12/17 Javascript
JavaScript获取指定元素位置的方法
2015/04/08 Javascript
浅谈node中的cluster集群
2018/06/02 Javascript
解决vue项目使用font-awesome,build后路径的问题
2018/09/01 Javascript
微信小程序websocket实现即时聊天功能
2019/05/21 Javascript
layui switch 开关监听 弹出确定状态转换的例子
2019/09/21 Javascript
基于VUE实现简单的学生信息管理系统
2021/01/13 Vue.js
pycharm运行程序时在Python console窗口中运行的方法
2018/12/03 Python
python try except返回异常的信息字符串代码实例
2019/08/15 Python
Python 实现将数组/矩阵转换成Image类
2020/01/09 Python
详解python程序中的多任务
2020/09/16 Python
哥伦比亚最大的网上商店:Linio哥伦比亚
2016/09/25 全球购物
澳大利亚最大的女装零售商:Millers
2017/09/10 全球购物
美国最大的无人机经销商:DroneNerds
2018/03/20 全球购物
阿联酋优惠券服务:Living Kool
2019/12/12 全球购物
教学质量评估实施方案
2014/03/17 职场文书
品牌服务方案
2014/06/03 职场文书
舞蹈专业求职信
2014/06/13 职场文书
调研汇报材料范文
2014/08/17 职场文书
检察机关个人对照检查材料
2014/09/15 职场文书
自主招生英文自荐信
2015/03/25 职场文书
MySQL查询学习之基础查询操作
2021/05/08 MySQL
详解nginx location指令
2022/01/18 Servers
使用python创建股票的时间序列可视化分析
2022/03/03 Python
vue使用echarts实现折线图
2022/03/21 Vue.js
Elasticsearch 数据类型及管理
2022/04/19 Python