我們通過程式語言對 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");

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