原生JS實現(xiàn)循環(huán)Nodelist Dom列表的4種方式示例
更新時間：2018年02月11日 10:35:52 作者：qiaolevip
這篇文章主要介紹了原生JS實現(xiàn)循環(huán)Nodelist Dom列表的4種方式,結(jié)合具體實例形式分析了javascript循環(huán)遍歷Nodelist Dom列表的常用操作技巧,需要的朋友可以參考下
本文實例講述了原生JS實現(xiàn)循環(huán)Nodelist Dom列表的4種方式。分享給大家供大家參考，具體如下：
function $(id) {
return document.getElementById(id);
}
var _PAGE = {
timeListDom: $('timeList')
};
var spanDoms = _PAGE.timeListDom.querySelectorAll('span'), domLen = spanDoms.length;
// 第一種方式：原生for循環(huán)
for (var i = 0; i < domLen; i++) {
var v = spanDoms[i];
// do something you want deal with DOM
}
// 第二種方式：Array 的 forEach函數(shù)
Array.prototype.forEach.call(spanDoms, function(v) {
// do something you want deal with DOM
});
// 第三種方式：Array 的 forEach函數(shù)
[].forEach.call(spanDoms, function(el) {
// do something you want deal with DOM
el.classList.remove('active');
});
// 第四種方式：繼承Array 的 forEach函數(shù)
NodeList.prototype.forEach = Array.prototype.forEach;
spanDoms.forEach(function(v) {
// do something you want deal with DOM
});
更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《JavaScript操作DOM技巧總結(jié)》、《JavaScript錯誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學運算用法總結(jié)》
希望本文所述對大家JavaScript程序設(shè)計有所幫助。
相關(guān)文章
本文分享了利用javascript驗證香港身份證的格式或真實性的代碼，具有很好的參考價值，下面跟著小編一起來看下吧2017-02-02
svg插入foreignObject無法響應(yīng)事件解決
這篇文章主要為大家介紹了svg插入foreignObject無法響應(yīng)事件解決,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-10-10
實例分析js類中的公有和私有變量2008-07-07
詳解JavaScript中扁平與樹形數(shù)據(jù)的轉(zhuǎn)換
這篇文章主要為大家想介紹了JavaScript中實現(xiàn)扁平與樹形數(shù)據(jù)相互轉(zhuǎn)換的方法，文中的示例代碼講解詳細，對我們學習JavaScript有一定的幫助，需要的可以參考一下2023-01-01
下面小編就為大家?guī)硪黄獪\談layer的iframe彈窗給里面的標簽賦值的問題。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-11-11
這篇文章主要為大家詳細介紹了Ionic2開發(fā)環(huán)境的搭建教程，文中步驟介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-06-06
Auntion-TableSort國人寫的一個javascript表格排序的東西
Auntion-TableSort國人寫的一個javascript表格排序的東西...2007-11-11
JS數(shù)組的遍歷方式for循環(huán)與for...in
本節(jié)主要介紹了JS數(shù)組的遍歷方式for循環(huán)與for...in,需要的朋友可以參考下2014-07-07
這篇文章主要介紹了javascript 數(shù)組操作詳解,需要的朋友可以參考下2015-01-01
JavaScript中textRange對象使用方法小結(jié)
這篇文章主要介紹了JavaScript中textRange對象使用方法小結(jié),需要的朋友可以參考下2015-03-03