ホームページ > 記事 > ウェブフロントエンド > JSを使用してループするNodelist Domリストを実装する方法
この記事では、ネイティブ JS でループする Nodelist Dom リストを実装する 4 つの方法を主に紹介し、具体的な例に基づいて Nodelist Dom リストをループする JavaScript の一般的な操作テクニックを分析します。ループする Nodelist Dom リストを実装するネイティブ JS 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 });
上記は皆さんのためにまとめたものです。今後皆さんのお役に立てれば幸いです。
関連記事:
vue で Jade テンプレートを使用する方法 Angular でコンポーネントにテンプレートを渡す Node.js での Async 関数と Await 関数を使用する以上がJSを使用してループするNodelist Domリストを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。