关于兼容IE9的dataset

64 阅读1分钟

添加给DOM元素动态添加自定义属性(兼容IE)

我想在项目中动态添加一个元素, 但是这个元素的样式被自定义属性锁死了, 根据代码我去其相邻元素取的到d自定义属性, 但是在ie下没有作用, 根据代码调试发现, ie下的DOM结构与谷歌的不一样, 不一样的DOM结构最后输出的attribute的顺序不同, 然后我想到了自定义属性dataset的用法, 它会自动把data-xxx的属性收集起来作为自定义属性的集合对象.

   // 相邻元素插入
   insertAfter(newELement,targetElement ){
      var parent = targetElement.parentNode;
      if( parent.lastChild == targetElement ){
        parent.appendChild( newELement );
      }else{
        // 只存在insertBefore()方法 , 往后插入元素使用下面方法
        parent.insertBefore( newELement, targetElement.nextSibling );
      }
    },
    // 模拟dataset
    getDataSet(ele){
      var attrs = ele.attributes,
      expense = {}, i, j;  
      for (i = 0, j = attrs.length; i < j; i++) {
        if(attrs[i].name.substring(0, 5) == 'data-') {
          expense[attrs[i].name.substring(5)] = attrs[i].value;
        }
      }
      return expense
    },
    // 给新元素绑定自定义属性
    async getIPAddress() {
      const data = await api.getClientIp({});
      this.targetIp.ip = data;
      const logo = document.getElementById('logo');
      let span = document.createElement('span');
      let targetDataKey = Object.keys(this.getDataSet(logo))['0'];
      span.setAttribute(`data-${targetDataKey}`,'');
      span.innerText = 'IPv6';
      this.insertAfter(span,logo);
    }