4 Möglichkeiten, die Nodelist-Dom-Liste in JS zu durchlaufen

Dieses Mal zeige ich Ihnen 4 Möglichkeiten, die Nodelist-Dom-Liste in JS zu schleifen. Was sind die Vorsichtsmaßnahmen für das Schleifen der Nodelist-Dom-Liste in JS? .

Die Beispiele in diesem Artikel beschreiben 4 Möglichkeiten, eine Nodelist-Dom-Liste mit Schleife in nativem JS zu implementieren. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

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
});

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Detaillierte Erklärung des asynchronen Ladens von JavaScript

Bildpfad verursacht Webpack Verpackungsfehler So gehen Sie mit
um

Das obige ist der detaillierte Inhalt von4 Möglichkeiten, die Nodelist-Dom-Liste in JS zu durchlaufen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!