设置自定义属性得两种方式

方式一：元素对象.属性名=属性值

   <button>按钮1</button>
    <button>按钮2</button>
    <button>按钮3</button>
    <script>
        var btnList=document.querySelectorAll('button');
        console.log(btnList)
        for (var i = 0; i < btnList.length; i++) {
            //设置自定义属性：元素对象.属性名=属性值（原理是先元素对象对应的堆内存中添加了一个属性不改变元素结构）
            //btnList[i].myIndex=i
          
            btnList[i].onclick=function(){
                //输出自定义属性
                console.log(this.myIndex)
            }
            
        }
    </script>

方式一DOM结构

方式二： 元素对象.setAttribute(‘属性名’，属性值)

​ 元素对象.getAttribute(‘属性名’):获取自定义属性

​ 元素对象.removeAttribute(‘属性名’)：移除自定义属性

    ![1567492184207.png](https://upload-images.jianshu.io/upload_images/13439272-30c21464edbf001c.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
<button>按钮1</button>
    <button>按钮2</button>
    <button>按钮3</button>
    <script>
        var btnList=document.querySelectorAll('button');
        console.log(btnList)
        for (var i = 0; i < btnList.length; i++) {          
            //设置自定义属性,基于SET-ATTRIBUTE是把属性信息写到了元素标签结构上（在结构中可以看到，并没有放到堆内存中）
            btnList[i].setAttribute('data-index',i)
            btnList[i].onclick=function(){
                //基于GET-ATTRIBUTE把存储在结构上的自定义属性值获取到
                console.log(this.getAttribute('data-index'))
            }
            
        }
    </script>

方式二DOM结构