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

 更新时间:2018年02月11日 10:35:52   作者:qiaolevip  
这篇文章主要介绍了原生JS实现循环Nodelist Dom列表的4种方式,结合具体实例形式分析了javascript循环遍历Nodelist Dom列表的常用操作技巧,需要的朋友可以参考下

GPT4.0+Midjourney绘画+国内大模型 会员永久免费使用!
如果你想靠AI翻身,你先需要一个靠谱的工具!

本文实例讲述了原生JS实现循环Nodelist Dom列表的4种方式。分享给大家供大家参考,具体如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
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程序设计有所帮助。

蓄力AI

微信公众号搜索 “ 脚本之家 ” ,选择关注

程序猿的那些事、送书等活动等着你

原文链接:http://qiaolevip.iteye.com/blog/2309895

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若内容造成侵权/违法违规/事实不符,请将相关资料发送至 reterry123@163.com 进行投诉反馈,一经查实,立即处理!

相关文章

  • 微信小程序返回上一级页面的实现代码

    微信小程序返回上一级页面的实现代码

    这篇文章主要介绍了微信小程序返回上一级页面的实现代码,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-06-06
  • 动态JavaScript所造成一些你不知道的危害

    动态JavaScript所造成一些你不知道的危害

    这篇文章给大家整理了动态JavaScript所造成的一些大家可能不知道的危害,文章介绍的很详细,有需要的朋友们可以参考借鉴,下面来一起看看吧。
    2016-09-09
  • JS中Json数据的处理和解析JSON数据的方法详解

    JS中Json数据的处理和解析JSON数据的方法详解

    JSON (JavaScript Object Notation)一种简单的数据格式,比xml更轻巧,这篇文章主要介绍了JS中Json数据的处理和解析JSON数据的方法详解的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2016-06-06
  • JavaScript代码判断点击第几个按钮

    JavaScript代码判断点击第几个按钮

    javascript点击按钮需求,在项目开发过程中经常遇到,本文通过一段代码给大家分享javascript代码判断点击第几个按钮,对本文感兴趣的朋友一起学习吧
    2015-12-12
  • PHP PDO操作总结

    PHP PDO操作总结

    这篇文章主要介绍了PHP PDO操作总结,本文讲解了使用PDO连接数据库、执行基本查询、获取行数、遍历结果集、转义用户输入的特殊字符、exec()、预处理语句等内容,需要的朋友可以参考下
    2014-11-11
  • JS实现数组简单去重及数组根据对象中的元素去重操作示例

    JS实现数组简单去重及数组根据对象中的元素去重操作示例

    这篇文章主要介绍了JS实现数组简单去重及数组根据对象中的元素去重操作,涉及javascript数组元素的遍历、判断、追加等操作实现去重功能的相关技巧,需要的朋友可以参考下
    2018-01-01
  • js实现简单音乐播放器

    js实现简单音乐播放器

    这篇文章主要介绍了js实现简单音乐播放器,可拖动进度条,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-06-06
  • bootstrap使用validate实现简单校验功能

    bootstrap使用validate实现简单校验功能

    这篇文章主要为大家详细介绍了bootstrap使用validate实现简单校验功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-12-12
  • 浅谈webpack 构建性能优化策略小结

    浅谈webpack 构建性能优化策略小结

    webpack以其丰富的功能和灵活的配置而深受业内吹捧,逐步取代了grunt和gulp成为大多数前端工程实践中的首选,这篇文章主要介绍了浅谈webpack 构建性能优化策略小结,感兴趣的小伙伴们可以参考一下
    2018-06-06
  • 关于微信小程序bug记录与解决方法

    关于微信小程序bug记录与解决方法

    这篇文章主要介绍了关于微信小程序bug记录与解决方法,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-08-08

最新评论