How to implement looping Nodelist Dom list using JS

亚连
Release: 2018-06-06 10:20:51
Original
2340 people have browsed it

This article mainly introduces 4 ways to implement looping Nodelist Dom list in native JS, and analyzes the common operation techniques of javascript looping through Nodelist Dom list based on specific examples. Friends who need it can refer to it

The examples in this article describe 4 ways to implement looping Nodelist Dom list in native JS. Share it with everyone for your reference, the details are as follows:

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 });
Copy after login

The above is what I compiled for everyone, I hope it will be helpful to everyone in the future.

Related articles:

How to use Jade templates in vue

Passing templates to components in Angular

Using Async and Await functions in Node.js

The above is the detailed content of How to implement looping Nodelist Dom list using JS. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!