JavaScript属性获取

一、操作标签的合法属性

1. 合法属性：比如id、class、title、href、src等。
2. 获取合法属性：获取元素之后，直接使用点语法。
3. 修改合法属性：获取元素之后，用等号赋值，修改已有属性。
4. 添加合法属性：直接等号赋值。

<div id="box" title="你好">你好吗？</div>
<script>
var title = document.getElementById('box').title;
console.log(title);

var oBox = document.getElementById("box");
oBox.title = "我很好！";

oBox.onclick = function(){
    oBox.className = "mybox";
}
</script>

二、操作标签的自定义属性

1. 判断是否存在某个自定义属性，hasAttribute()传入属性名称，true/false。
2. 获取自定义属性，getAttribute()传入属性名。
3. 设置自定义属性，setAttribute()传入要设置的属性名和要设置的属性值。如果没有设置属性就会新增该属性，如果有就会用新值覆盖。
4. 移除自定义属性，removeAttribute()传入要删除的属性名。如果有就删除，如果没有也不会报错。

<div id="stu" name="zhangsan" age="20" height="180">张三</div>
<script>
    var oStu = document.getElementById("stu");
    console.log(oStu.hasAttribute("name"));
    console.log(oStu.getAttribute("age"));
    oStu.setAttribute("age", "18");
    oStu.removeAttribute("height");
</script>

5. dataset可用于自定义data-属性，可以通过访问一个元素的dataset属性来存取data-*自定义属性的值。

<div id="stu" data-name="lisi" data-of-birth-day="1992" >lisi</div>
<script>
    var oStu = document.getElementById('stu');
    console.log(oStu.dataset.ofBirthDay);
    oStu.dataset.age = 20;
</script>