JS nodeList轉數組，兼容IE低版本

1、前言

nodeList轉數組貌似不多會這樣去操做，但我在作圖片懶加載時，我獲取了全部須要作懶加載的img元素，也就是一個NodeList對象，打個比方：

對這些元素進行src修改後，我想將此項從NodeList中刪除掉，畢竟是操做dom的行爲，我不想每次加載完成還在反覆操做這堆dom節點。

//這樣加載完成scroll再怎麼執行都不會再觸發
function replaceUrl() {
  if(nodeList.len){
    nodeList.forEach(function (self, index) {
      //替換圖片
      self.url = "xxxx"
      //操做完就刪除掉此項
      nodeList.splice(index,1);
    })
  };
};
parent.addEventListener("scroll",replaceUrl);

很明顯，NodeList長得像數組，有length，能經過NodeList["索引"]讀取某個元素，但它確實不是數組，NodeList對象是一個節點的集合，它不支持數組方法使用，那麼怎麼轉換數組方便操做呢？

2、nodeList轉數組

 在網上找了個比較簡單的方法

  function nodeListToArr(data) {
    var arr = [];
    try{
      //ie8及如下不支持
      arr = Array.prototype.slice.call(data);
    }catch(e){
      //兼容寫法
      var len = data.length;
      for(var i = 0; i < len; i++){
        arr.push(data[i]);
      }
    };
    return arr;
  };

之因此寫了下面一種方式是由於，IE8及如下版本中的NodeList是一個com對象，所以並不支持JS方法，會報錯。

2019.6.2新增ES6寫法，數組拓展運算符的使用：

 

let P = document.querySelectorAll('p');
//獲取頁面全部p元素並修改文本內容
[...P].forEach(ele => ele.innerHTML = '聽風是風');