自定义属性通常用data-开头
以data-开头的自定义属性可以通过element.dataset.index或element.dataset['index']的 方式获取,此时去掉data-

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="demo" aynu="aynu" data-list="123" data-list-name="dln"></div>
<script>
    var div=document.getElementById('demo');
    console.log(div.id);
    console.log(div.getAttribute('id'));
    console.log(div.getAttribute('aynu'));
    div.setAttribute('aynu','ultraman');    //设置自定义属性的值
    div.setAttribute('class','box');    //设置class的值
    div.removeAttribute('aynu');
    console.log(div.dataset.list);          //以data开头时,可以这样获取,dataset是一个集合
    console.log(div.dataset.listName);      //当有多个'-'时,采用驼峰命名法
</script>
</body>
</html>

三种获取元素属性的方法以及区别_自定义

可见结果相同

区别:

element.属性 只能获取元素本身自带的属性

element.getAttribute(‘属性’) 可以获取程序员自定义的属性

三种获取元素属性的方法以及区别_html_02

```html

可见执行div.setAttribute('aynu','ultraman'); //设置自定义属性的值 div.setAttribute('class','box'); //设置自定义属性的值后发生改变

三种获取元素属性的方法以及区别_自定义属性_03


该语句执行后div.removeAttribute('aynu');

三种获取元素属性的方法以及区别_html_04

aynu属性被删除