4 façons de parcourir la liste Nodelist Dom dans JS

Cette fois, je vais vous présenter 4 façons de boucler la liste Nodelist Dom en JS Quelles sont les précautions pour boucler la liste Nodelist Dom en JS. Ce qui suit est un cas pratique, jetons un coup d'œil. .

Les exemples de cet article décrivent 4 façons d'implémenter une liste Nodelist Dom en boucle dans JS natif. Partagez-le avec tout le monde pour votre référence, les détails sont les suivants :

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

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes. sur le site PHP chinois !

Lecture recommandée :

Explication détaillée du chargement asynchrone de JavaScript

Le chemin de l'image provoque le webpack erreur d'emballage Comment gérer

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!