How to implement looping Nodelist Dom list using JS

This article mainly introduces 4 ways to implement looping Nodelist Dom list in native JS, and analyzes the common operation techniques of javascript looping through Nodelist Dom list based on specific examples. Friends who need it can refer to it

The examples in this article describe 4 ways to implement looping Nodelist Dom list in native JS. Share it with everyone for your reference, the details are as follows:

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(&#39;active&#39;);
});
// 第四种方式：继承Array 的 forEach函数
NodeList.prototype.forEach = Array.prototype.forEach;
spanDoms.forEach(function(v) {
 // do something you want deal with DOM
});

The above is what I compiled for everyone, I hope it will be helpful to everyone in the future.

Related articles:

How to use Jade templates in vue

Passing templates to components in Angular

Using Async and Await functions in Node.js

The above is the detailed content of How to implement looping Nodelist Dom list using JS. For more information, please follow other related articles on the PHP Chinese website!