DOM元素的三种属性

我们通过编程语言对 HTML DOM 进行访问，所有 HTML 元素被定义为对象，而编程接口则是对象方法和对象属性。

系统属性

HTML对象原有的属性，如“id”,“class”,“src”,“value”等，我们可以直接获取或设置（比如节点的名称或内容）。

console.log(div.id); //获取属性值
div.id = "box"; //设置属性值

直接给被选元素设置系统属性，将替换原有的属性值。

自定义属性

某些场合下，HTML属性已经满足不了我们的需求，自定义属性就发挥了十分关键的作用：

/*1,直接给元素添加自定义属性*/
<div id="box" newAttr="123"></div>
/*2,通过setAttribute()方法添加属性*/
div.setAttribute("newAttr2","abc");

console.log(div.newAttr,div.newAttr2); //undefined undefined
console.log(div.getAttribute("newAttr"),div.getAttribute("newAttr2")); //123 abc

自定义的属性不能像系统属性一样通过’.‘或’[]'拿到属性值，需要通过getAttribute()方法。jQuery中通过attr()即可获取和设置属性。

临时属性

临时属性，因为是临时添加的属性所以不会加到元素结构里面去，CSS也无法获取：

/*添加临时属性*/
div.tepmAttr = 666;
console.log(div.tepmAttr); //666

添加之后，被选元素并未添加该属性。

移除属性

removeAttribute() ：删除指定的属性。

div.removeAttribute("newAttr");
div.removeAttribute("id");

系统属性，自定义属性都可通过该方法进行移除指定属性。临时属性并未添加到元素结构里面去，所以也不存在移除的说法。