原生JS遍历Nodelist的4种方法详解
作者:青柠时间:2026-10-22 12:35:46浏览:318
本文介绍在原生JavaScript中遍历Nodelist DOM列表的四种常用方式。包括传统的for循环、利用Array.prototype.forEach.call、直接继承Array.prototype.forEach以及ES6的for...of循环。通过具体代码示例,帮助开发者理解不同遍历方法的实现原理与适用场景。
Nodelist遍历的四种实现方式
本文详细讲解了在原生JavaScript中遍历Nodelist DOM列表的四种实现方式,旨在为开发者提供实用的参考方案。
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编程工作有所帮助。
作者最新文章
JS读取本地文件时报错或无响应的常见原因
2026-11-05 16:32:31
let、const与var的区别:JavaScript变量声明最佳实践
2026-11-05 14:16:38
JS中直接定义静态二维数组的字面量写法
2026-11-05 14:16:08
JS 怎么查找字符串中所有匹配项的位置
2026-11-05 14:15:53
JavaScript新手常犯的编码错误与最佳实践指南
2026-11-04 22:12:38
