zoukankan      html  css  js  c++  java
  • 如何循环遍历document.querySelectorAll()方法返回的结果

    使用JavaScript的forEach方法,我们可以轻松的循环一个数组,但如果你认为document.querySelectorAll()方法返回的应该是个数组,而使用forEach循环它:

    /* Will Not Work */
    document.querySelectorAll('.module').forEach(function() {
      
    });

    执行上面的代码,你将会得到执行错误的异常信息。这是因为,document.querySelectorAll()返回的不是一个数组,而是一个NodeList

    对于一个NodeList,我们可以用下面的技巧来循环遍历它:

    var divs = document.querySelectorAll('div');
    
    [].forEach.call(divs, function(div) {
      // do whatever
      div.style.color = "red";
    });

    当然,我们也可以用最传统的方法遍历它:

    var divs = document.querySelectorAll('div'), i;
    
    for (i = 0; i < divs.length; ++i) {
      divs[i].style.color = "green";
    }

    还有一种更好的方法,就是自己写一个:

    // forEach method, could be shipped as part of an Object Literal/Module
    var forEach = function (array, callback, scope) {
      for (var i = 0; i < array.length; i++) {
        callback.call(scope, i, array[i]); // passes back stuff we need
      }
    };
    
    // 用法:
    // optionally change the scope as final parameter too, like ECMA5
    var myNodeList = document.querySelectorAll('li');
    forEach(myNodeList, function (index, value) {
      console.log(index, value); // passes index + value back!
    });

    还有一种语法:for..of 循环,但似乎只有Firefox支持:

    /* Be warned, this only works in Firefox */
    
    var divs = document.querySelectorAll('div );
    
    for (var div of divs) {
      div.style.color = "blue";
    }

    最后是一种不推荐的方法:给NodeList扩展一个forEach方法:

    NodeList.prototype.forEach = Array.prototype.forEach;
    
    var divs = document.querySelectorAll('div').forEach(function(el) {
      el.style.color = "orange";
    })

    有兴趣的朋友可以读一下MDN上的这篇文章

  • 相关阅读:
    初学版本控制更新Version control
    关于函数式编程(Functional Programming)
    Annotation
    Container 、Injection
    Build Tools
    Version Control
    URL和URI的区别
    函数式编程语言
    HTTP协议的简单解析
    Windows10安装MySQL8.0
  • 原文地址:https://www.cnblogs.com/wpbars/p/6442548.html
Copyright © 2011-2022 走看看