zoukankan      html  css  js  c++  java
  • JS nodeList转数组,兼容IE低版本

    一、前言

    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对象是一个节点的集合,它不支持数组方法使用,那么怎么转换数组方便操作呢?

    二、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 = '听风是风');
  • 相关阅读:
    tiptop之4gl调试3/31
    打印空白3/31
    佛陀教育入门
    什么是佛教
    智、觉
    保持头脑清醒的窍门2/13
    php中将数组转换为指定符号分割的字符串
    kali下apche配置多网站
    php数组指定字段排序
    php 语句块耗时性能测试
  • 原文地址:https://www.cnblogs.com/echolun/p/10140024.html
Copyright © 2011-2022 走看看