JS で Nodelist Dom リストをループする 4 つの方法

今回は、JS で Nodelist Dom リストをループする 4 つの方法を紹介します。JS で Nodelist Dom リストをループする際の 注意事項 は何ですか? ここで実際のケースを見てみましょう。

この記事の例では、ネイティブ JS でループする Nodelist Dom リストを実装する 4 つの方法について説明します。参考のために皆さんと共有してください。詳細は次のとおりです:

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

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

JavaScriptの非同期読み込みの詳細な説明

画像パスによって引き起こされるWebpackパッケージ化エラーに対処する方法

以上がJS で Nodelist Dom リストをループする 4 つの方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。