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

转载  更新时间:2018年02月11日 10:35:52   作者:qiaolevip   我要评论

这篇文章主要介绍了原生JS实现循环Nodelist Dom列表的4种方式,结合具体实例形式分析了javascript循环遍历Nodelist Dom列表的常用操作技巧,需要的朋友可以参考下

本文实例讲述了原生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操作DOM技巧总结》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结

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

相关文章

  • JavaScript异步编程:异步数据收集的具体方法

    JavaScript异步编程:异步数据收集的具体方法

    我们先尝试在不借助任何工具函数的情况下来解决这个问题。笔者能想到的最简单的方法是:因前一个readFile的回调运行下一个readFile,同时跟踪记录迄今已触发的回调次数,并最终显示输出。下面是笔者的实现结果。
    2013-08-08
  • 手机端实现Bootstrap简单图片轮播效果

    手机端实现Bootstrap简单图片轮播效果

    这篇文章主要为大家详细介绍了基于Bootstrap的简单轮播图的手机实现,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-10-10
  • node.js Web应用框架Express入门指南

    node.js Web应用框架Express入门指南

    这篇文章主要介绍了node.js Web应用框架Express入门指南,从安装到各种技术的应用,都进行了讲解,是一篇不错的Express入门教程,需要的朋友可以参考下
    2014-05-05
  • JavaScript判断数组是否包含指定元素的方法

    JavaScript判断数组是否包含指定元素的方法

    这篇文章主要介绍了JavaScript判断数组是否包含指定元素的方法,涉及javascript中contains方法的使用技巧,需要的朋友可以参考下
    2015-07-07
  • Js得到radiobuttonlist选中值的两种方法(推荐)

    Js得到radiobuttonlist选中值的两种方法(推荐)

    下面小编就为大家带来一篇Js得到radiobuttonlist选中值的两种方法(推荐)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-08-08
  • web性能优化之javascript性能调优

    web性能优化之javascript性能调优

    本文详细介绍Web 开发中关于性能方面需要注意的一些小细节,从 JavaScript 本身着手,介绍了 JavaScript 中需要避免的一些函数的使用和编程规则,比如 eval 的弊端,function scope chain 以及 String 的用法等等
    2012-12-12
  • bootstrap警告框使用方法解析

    bootstrap警告框使用方法解析

    这篇文章主要为大家详细介绍了bootstrap警告框使用方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-01-01
  • Js中async/await的执行顺序详解

    Js中async/await的执行顺序详解

    随着async/await正式纳入ES7标准,越来越多的人开始研究据说是异步编程终级解决方案的 async/await。下面这篇文章主要给大家介绍了关于Js中async/await执行顺序的相关资料,需要的朋友可以参考借鉴,下面来一起看看吧。
    2017-09-09
  • ES6新特性之类(Class)和继承(Extends)相关概念与用法分析

    ES6新特性之类(Class)和继承(Extends)相关概念与用法分析

    这篇文章主要介绍了ES6新特性之类(Class)和继承(Extends)相关概念与用法,结合实例形式较为详细的分析了ES6中类(Class)和继承(Extends)的基本概念、语法、使用方法与注意事项,需要的朋友可以参考下
    2017-05-05
  • js原生Ajax的封装和原理详解

    js原生Ajax的封装和原理详解

    这篇文章主要为大家详细介绍了js原生Ajax的封装和原理,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-03-03

最新评论