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");

系統屬性，自定義屬性都可通過該方法進行移除指定屬性。臨時屬性並未添加到元素結構裏面去，所以也不存在移除的說法。