我们的标签它默认就有自己的属性：id、class、style、src等等

​ 如果它不存在，我们自己写入的叫做”自定义属性“，一般我们用来存储某些数据的场景下使用；

<div class="box" boxTitle="frameworkBox" id="hyy" data-id="myId"></div>
// 这里的boxTitle就是我们的自定义属性
let box = document.querySelector('.box')
console.log(box.getAttribute('boxTitle')) // frameworkBox
console.log(box.getAttribute('id')) // "hyy"
console.log(box.getAttribute('data-id')) // "myId"

• getAttribute(‘属性名’)
  • 获取html元素的行内属性，可以获取自定义也可以获取自带属性，主要是用来获取自定义属性的值
• setAttribute(‘属性名’，‘属性值’)
  • 设置html元素的行内属性，主要是用来设置自定义属性
  • 如果属性原来存在就是修改，如果不存在就是新增一个行内属性到行内
• removeAttribute(‘属性名’)
  • 删除某个行内属性
  • 既可以删除自带也可以删除自定义

HTML5-新增的操作自定义属性

规范自定义属性的写法

<div class="box" boxTitle="frameworkBox" id="hyy" data-id="myId"></div>
这里的data-用法

• 如何获取自定义属性？
  • 元素.dataset ： 这里包含所有的自定义属性
• 如何获取单个自定义属性？
  • 元素.dataset.属性名（如果还有-，需要换成驼峰命名法）
• 如何设置属性？
  • 元素.dataset.属性名 = 数据