JS-自定义属性

自定义属性的目的是为了保存并使用数据，有些数据可以保存到页面中而不用保存到数据库中
H5规定自定义属性 data- 开头作为属性名并且赋值

<div data-index="1"> </div>
// 或者用JS设置
element.setAttribute('data-index', 1)

获取属性值

// 获取自带的属性
element.属性 
box.class
// 获取自定义的属性
element.getAttribute('属性')
box.getAttribute('data-index')

区别
element.属性 获取内置属性值（元素本身自带的属性）
element.getAttribute('属性') 主要获取自定义的属性（标准）我们自定义的属性

修改属性值

// 修改自带的属性
element.属性 = '值'
box.id = 'test'
// 修改自定义的属性
element.setAttribute('属性', '值')
box.setAttribute('data-index', '1')

区别
element.属性 = '值' 设置内置属性值（元素本身自带的属性）
element.setAttribute('属性', '值') 主要设置自定义的属性（标准）我们自定义的属性

移除属性

element.removeAttribute('属性')

H5新增获取自定义属性方法

他只能获取 data- 开头的

dataset 是一个集合里面存放了所有以data开头的自定义属性

// 获取自定义属性 data- 开头的集合
box.dataset

// 两种获取方式
// 获取自定义属性 data-index
box.dataset.index
box.dataset['index']

// 如果自定义属性里面有多个 - 链接的单词，获取的时候采取驼峰命名法
box.dataset.listName
box.dataset['listName']