原生JS實(shí)現(xiàn)循環(huán)Nodelist Dom列表的4種方式示例
更新時(shí)間：2018年02月11日 10:35:52 作者：qiaolevip
這篇文章主要介紹了原生JS實(shí)現(xiàn)循環(huán)Nodelist Dom列表的4種方式,結(jié)合具體實(shí)例形式分析了javascript循環(huán)遍歷Nodelist Dom列表的常用操作技巧,需要的朋友可以參考下
本文實(shí)例講述了原生JS實(shí)現(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錯(cuò)誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》
希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。
相關(guān)文章
微信小程序返回上一級(jí)頁(yè)面的實(shí)現(xiàn)代碼
這篇文章主要介紹了微信小程序返回上一級(jí)頁(yè)面的實(shí)現(xiàn)代碼,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-06-06
動(dòng)態(tài)JavaScript所造成一些你不知道的危害
這篇文章給大家整理了動(dòng)態(tài)JavaScript所造成的一些大家可能不知道的危害，文章介紹的很詳細(xì)，有需要的朋友們可以參考借鑒，下面來(lái)一起看看吧。2016-09-09
JS中Json數(shù)據(jù)的處理和解析JSON數(shù)據(jù)的方法詳解
JSON （JavaScript Object Notation）一種簡(jiǎn)單的數(shù)據(jù)格式，比xml更輕巧，這篇文章主要介紹了JS中Json數(shù)據(jù)的處理和解析JSON數(shù)據(jù)的方法詳解的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2016-06-06
JavaScript代碼判斷點(diǎn)擊第幾個(gè)按鈕
javascript點(diǎn)擊按鈕需求，在項(xiàng)目開(kāi)發(fā)過(guò)程中經(jīng)常遇到，本文通過(guò)一段代碼給大家分享javascript代碼判斷點(diǎn)擊第幾個(gè)按鈕，對(duì)本文感興趣的朋友一起學(xué)習(xí)吧2015-12-12
這篇文章主要介紹了PHP PDO操作總結(jié),本文講解了使用PDO連接數(shù)據(jù)庫(kù)、執(zhí)行基本查詢、獲取行數(shù)、遍歷結(jié)果集、轉(zhuǎn)義用戶輸入的特殊字符、exec()、預(yù)處理語(yǔ)句等內(nèi)容,需要的朋友可以參考下2014-11-11
JS實(shí)現(xiàn)數(shù)組簡(jiǎn)單去重及數(shù)組根據(jù)對(duì)象中的元素去重操作示例
這篇文章主要介紹了JS實(shí)現(xiàn)數(shù)組簡(jiǎn)單去重及數(shù)組根據(jù)對(duì)象中的元素去重操作,涉及javascript數(shù)組元素的遍歷、判斷、追加等操作實(shí)現(xiàn)去重功能的相關(guān)技巧,需要的朋友可以參考下2018-01-01
js實(shí)現(xiàn)簡(jiǎn)單音樂(lè)播放器
這篇文章主要介紹了js實(shí)現(xiàn)簡(jiǎn)單音樂(lè)播放器，可拖動(dòng)進(jìn)度條，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-06-06
bootstrap使用validate實(shí)現(xiàn)簡(jiǎn)單校驗(yàn)功能
這篇文章主要為大家詳細(xì)介紹了bootstrap使用validate實(shí)現(xiàn)簡(jiǎn)單校驗(yàn)功能,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-12-12
淺談webpack 構(gòu)建性能優(yōu)化策略小結(jié)
webpack以其豐富的功能和靈活的配置而深受業(yè)內(nèi)吹捧，逐步取代了grunt和gulp成為大多數(shù)前端工程實(shí)踐中的首選，這篇文章主要介紹了淺談webpack 構(gòu)建性能優(yōu)化策略小結(jié)，感興趣的小伙伴們可以參考一下2018-06-06
這篇文章主要介紹了關(guān)于微信小程序bug記錄與解決方法,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2018-08-08