ホームページ >ウェブフロントエンド >jsチュートリアル >JSを使用してループするNodelist Domリストを実装する方法

JSを使用してループするNodelist Domリストを実装する方法

亚连
亚连オリジナル
2018-06-06 10:20:512459ブラウズ

この記事では、ネイティブ 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(&#39;active&#39;);
});
// 第四种方式:继承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 サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。