DOM元素的attribute和property很容易混倄在一起，分不清楚，兩者是不同的東西，但是兩者又聯繫緊密。很多新手朋友，也包括以前的我，常常會搞不清楚。
attribute翻譯成中文術語為“特性”，property翻譯成中文術語為“屬性”，從中文的字面意思來看，確實是有點區別了，先來說說attribute。
attribute是一個特性節點，每個DOM元素都有對應的attributes屬性來存放所有的attribute節點，attributes是一個類別數組的容器，說得準確點就是NameNodeMap，總之就是一個類似數組但又和陣列不太一樣的容器。 attributes的每個數字索引以名值對(name=”value”)的形式存放了一個attribute節點。
上面的div元素的HTML程式碼中有class、id還有自訂的gameid，這些特性都存放在attributes中，類似下面的形式：
[ class="box", id="box", gameid="880" ]
可以這樣來存取attribute節點：
複製程式碼 程式碼如下:var elem = document.getElementById( 'box' );
console.log( elem.attributes[0].name ); // class
console.log( elem.attributes[0].value ); // box
但是IE6-7將許多東西都存放在attributes中，上面的存取方法和標準瀏覽器的回傳結果又不同。通常要取得attribute節點直接用getAttribute方法：
複製程式碼
程式碼如下: elem.getAttribute('gameid') ); // 880
要設定一個attribute節點使用setAttribute方法，要刪除就用removeAttribute：
複製程式碼
程式碼如下:elem.setAttribute('testAttr', 'testVal'); >console.log( elem.removeAttribute('gameid') ); // undefined
attributes是會隨著新增或刪除attribute節點動態更新的。
property就是一個屬性，如果把DOM元素看成是一個普通的Object對象，那麼property就是一個以名值對(name=”value”)的形式存放在Object中的屬性。要新增和刪除property也簡單多了，和普通的物件沒啥分別：
複製程式碼
程式碼如下: elem.gameid = 880; // 新增console.log( elem.gameid ) // 取得
delete elem.gameid // 刪除
之所以attribute和property容易混倄在一起的原因是，很多attribute節點還有一個相對應的property屬性，比如上面的div元素的id和class既是attribute，也有對應的property，不管使用哪種方法都可以存取和修改。
複製程式碼
程式碼如下:console.log( elem.getAttribute('id') ); // boxconsole.log( elem.id ); // box
elem.id = 'hello';
console.log( elem.getAttribute('id') ); // hello
但是對於自訂的attribute節點，或是自訂property，兩者就沒有關係了。
複製程式碼
程式碼如下:console.log( elem.getAttribute('gameid' ); // 880console.log( elem.gameid ); // undefined
elem.areaid = '900';
console.log( elem.getAttribute('areaid') ) // null
對於IE6-7來說，沒有區分attribute和property：
複製程式碼
