方式一：元素对象.属性名=属性值
<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(‘属性名’)：移除自定义属性
<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结构
