固有属性
标签天生自带的属性 比如class id title等, 可以直接使用点语法操作
自定义属性
由程序员自己添加的属性,在DOM对象中找不到, 无法使用点语法操作,必须使用专门的API
<body>
<p></p>
<button>设置自定义属性</button>
<button>获取自定义属性</button>
<button>移除自定义属性</button>
<script>
let p = document.querySelector('p')
let btn1 = document.querySelector('button:nth-of-type(1)')
let btn2 = document.querySelector('button:nth-of-type(2)')
let btn3 = document.querySelector('button:nth-of-type(3)')
btn1.addEventListener('click', function () {
// 为元素设置自定义属性：元素.setAttribute(自定义属性名称，值)
p.setAttribute('myindex', 10)
})
btn2.addEventListener('click', function () {
// 获取自定义属性的值：元素.getAttribute(自定义属性名称)
console.log(p.getAttribute('myindex'));
})
btn3.addEventListener('click', function () {
// 移除自定义属性：元素.removeAttribute(你想移除的自定义属性名称)
p.removeAttribute('myindex')
})
</script>
</body>
注：
1.内置属性的操作建议使用点语法
2.自定义属性的操作建议使用api
data-自定义属性
传统的自定义属性没有专门的定义规则,开发者随意定值,不够规范,所以在html5中推出来了专门的data-自定义属性
在标签上一律以data-开头
在DOM对象上一律以dataset对象方式获取
<body>
<p class="red" data-id="10" data-name="jack" data-age="20">我是p元素</p>
<button>获取自定义属性的值</button>
<script>
let btn = document.querySelector('button')
let p = document.querySelector('p')
btn.addEventListener('click', function() {
// dataset：可以获取当前元素的所有以data-开头的自定义属性，生成一个对象
console.log(p.dataset)
})
</script>
</body>
