## Attribute 對象 HTML 元素中包含標簽名和若干個鍵值對，這個鍵值對我們稱為“屬性”（Attribute） 在 DOM 中，我們很少直接對屬性進行操作，一般都是元素節點對象（Element對象）來操作屬性。 ### 1.Element.attributes屬性 返回一個類似數組的動態對象 > 示例：遍歷元素節點的所有屬性 ~~~javascript var d1Ele = document.getElementById("_d3").nextElementSibling; if (d1Ele.hasAttributes()) { var d1Att = d1Ele.attributes; for (var i = 0; i < d1Att.length; i++) { console.log(d1Att[i].name + ":" + d1Att[i].value); } } else { console.log("No attributes To show!"); } ~~~ ### 2. 元素節點對象的屬性 HTML元素節點的標準屬性，會自動成為元素節點對象的屬性。 ~~~javascript var _abaidu = document.getElementById("_abaidu"); console.log(_abaidu.href); // http://www.baidu.com console.log(_abaidu.target); // _blank console.log(_abaidu.test); // undefined ~~~ > 雖然在Html中大小寫是不敏感的，但是在 Javascript 中，屬性大小寫敏感，而且屬性一般都是采用小寫。 > 有些HTML屬性名是 Javascript 的保留字，轉為 Javascript 屬性時，需要改名字，主要由`class-className,for-htmlFor` ### 3.屬性操作的標準方法 `getAttribute()` `setAttribute()` 上述兩個方法對所有的屬性都適用（包含用戶自定義的方法） ~~~javascript _abaidu.setAttribute("href","http://www.sina.com"); console.log(_abaidu.getAttribute("href")); _abaidu.setAttribute("test","xxx"); console.log(_abaidu.getAttribute("test")); ~~~ ` hasAttribute()` `removeAttribute()` ### 4.dataset 屬性 有時需要在 Html 上附加數據，供 Javascript 腳本使用。一種解決方法是自定義屬性。 雖然自己隨意定義的屬性名可以通過相關的方法進行定義和賦值，但是會使得HTML元素的屬性不符合規范，導致網頁的HTML代碼通不過校驗。 更好的解決方法是，使用標準提供的`data-*`屬性。 再使用元素對象的 dataset 屬性對自定義的屬性進行操作。 > 注意：data-后面的屬性有限制，只能包含字母、數字、連詞線（-）、點（.）、冒號（:）和下劃線(_)。而且屬性名不應該使用大寫字母。比如data-helloWorld，我們不這么寫，而寫成data-hello-world。 > 在轉成dataset的鍵名的時候，連詞線后面如果跟著一個小寫字母，那么連詞線會被移除，該小寫字母轉為大寫字母，其他字符不變。 ~~~javascript console.log(_abaidu.getAttribute("data-hello-world")); console.log(_abaidu.dataset.helloWorld); // 駝峰命名 ~~~