屬性的操作

html元素包括標籤名和若干個鍵值對，這個鍵值對就稱為屬性（attribute）。

屬性本身就是乙個物件（attr物件），但實際上這個物件極少使用。一般都是通過元素節點物件（htmlelement物件）來操作屬性。

元素物件有乙個attributes屬性，返回乙個類似陣列的動態物件，成員是該元素標籤的所有屬性節點物件，屬性的實時變化都會反映在這個節點物件上。其他型別的節點物件，雖然也有attributes屬性，但返回的都是null，因此可以把這個屬性視為元素物件獨有的。

單個屬性可以通過序號引用，也可以通過屬性名引用。

// html **
// document.body.attributes[0]
document.body.attributes.bgcolor
document.body.attributes['onload']

注意，上面**的三種方法，返回的都是屬性節點物件，而不是屬性值。

屬性節點物件有name和value屬性，對應該屬性的屬性名和屬性值，等同於nodename屬性和nodevalue屬性。

var n = document.getelementbyid("mydiv");
n.attributes[0].name // "id"
n.attributes[0].nodename // "id"

html元素的標準屬性（即在標準中定義的屬性），會自動成為元素節點物件的屬性。

var a = document.getelementbyid("test");
a.id // "test"
a.href // "http://......"

上面**中，a元素標籤的屬性id和href，自動成為節點物件的屬性。

這些屬性都是可寫的。

var img = document.getelementbyid("myimage");
img.src = "http://......";

上面的寫法會立刻替換掉img物件的src屬性，即會顯示另外一張。

這種修改屬性的方法，常常用於新增表單的屬性。

var f = document.forms[0];
f.action = "submit.php";
f.method = "post";

上面**為表單新增了提交**和提交方法。

注意，這種用法雖然可以讀寫屬性，但是無法刪除屬性，delete運算子在這裡不會生效。

html元素的屬性名是大小寫不敏感的，但是j**ascript物件的屬性名是大小寫敏感的。轉換規則是，轉為j**ascript屬性名時，一律採用小寫。如果屬性名包括多個單詞，則採用駱駝拼寫法。

有些html屬性名是j**ascript的保留字，轉為j**ascript屬性時，必須改名。主要是以下兩個：

另外，html屬性值一般都是字串，但是j**ascript屬性會自動轉換型別。比如，將字串的true轉為布林值，將onclick的值轉為乙個函式，將style轉為乙個cssstyledeclaration物件。

元素節點提供六個方法，用來操作屬性。

這有幾點注意。

（1）適用性

這六個方法對所有屬性（包括使用者自定義的屬性）都適用。

（2）返回值

getattribute()只返回字串，不會返回其他型別的值。

（3）屬性名

這些方法只接受標準名稱，不用改寫保留字，比如for和class都可以直接使用。另外，這些方法對於屬性名是大小寫不敏感的。

element.getattribute方法返回當前元素節點的指定屬性。如果指定屬性不存在，則返回null。

element.getattributenames方法返回乙個陣列，成員是當前元素的所有屬性名。如果當前元素沒有任何屬性，則返回乙個空陣列。使用element.attributes屬性也可以拿到同樣的結果，唯一區別是它返回的是類似陣列的物件。

element.setattribute方法用於為當前節點新增屬性。如果屬性名存在，相當於編輯已存在的屬性。該方法沒有返回值。

這裡有兩個地方需要注意，首先，屬性值總是字串，其他型別的值會自動轉為字串，比如布林值true；其次，disabled屬性是乙個布林屬性，對於元素來說，這個屬性不需要屬性值，只要設定了就總是會生效，因此setattribute方法可以將disabled屬性設成任意值。

element.hasattribute方法返回乙個布林值，表示當前元素節點是否包含指定屬性。

element.hasattributes方法返回乙個布林值，表示當前元素是否有屬性，如果沒有任何屬性，就返回false，否則返回true。

element.removeattribute方法移除指定屬性。該方法沒有返回值。

有時，需要在html元素上附加資料，供j**ascript指令碼使用。一種解決方法是自定義屬性。

上面**為div元素自定義了foo屬性，然後可以用getattribute()和setattribute()讀寫這個屬性。

更好的方法是，使用標準提供的data-*屬性。

然後使用元素節點物件的dataset屬性，它指向乙個物件，可以用來操作html元素標籤的data-*屬性。

var n = document.getelementbyid("mydiv");
n.dataset.foo // bar
n.dataset.foo = "baz";

刪除乙個dataset屬性，也可以用getattribute("data-foo")、remove("data-foo")、setattribute("data-foo")、hasattribute("data-foo")等方法操作data-*屬性。

注意，data-後面的屬性名有限制，只能包含字母。數字。連詞線（-）、點（.）、冒號（:）和下劃線（_）。而且，屬性名不應該使用a到z的大寫字母，比如不能有data-helloworld這樣的屬性名，而寫成data-hello-world。

轉成dataset的鍵名時，連詞線後面如果跟著乙個小寫字母，那麼連詞線會被移除，該小寫字母轉為大寫字母，其他字元不變。