attribute和property的區別

一喵嗚發表於2014-09-09

DOM元素的attribute和property很容易混倄在一起，分不清楚，兩者是不同的東西，但是兩者又聯絡緊密。很多新手朋友，也包括以前的我，經常會搞不清楚。

attribute翻譯成中文術語為“特性”，property翻譯成中文術語為“屬性”，從中文的字面意思來看，確實是有點區別了，先來說說attribute。

attribute是一個特性節點，每個DOM元素都有一個對應的attributes屬性來存放所有的attribute節點，attributes是一個類陣列的容器，說得準確點就是NameNodeMap，總之就是一個類似陣列但又和陣列不太一樣的容器。attributes的每個數字索引以名值對(name=”value”)的形式存放了一個attribute節點。

1 <div class="box" id="box" gameid="880">hello</div>

上面的div元素的HTML程式碼中有class、id還有自定義的gameid，這些特性都存放在attributes中，類似下面的形式：

1 [ class="box", id="box", gameid="880" ]

可以這樣來訪問attribute節點：

1 var elem = document.getElementById( 'box' );
2 console.log( elem.attributes[0].name ); // class
3 console.log( elem.attributes[0].value ); // box

但是IE6-7將很多東西都存放在attributes中，上面的訪問方法和標準瀏覽器的返回結果又不同。通常要獲取一個attribute節點直接用getAttribute方法：

1 console.log( elem.getAttribute('gameid') ); // 880

要設定一個attribute節點使用setAttribute方法，要刪除就用removeAttribute：

1 elem.setAttribute('testAttr', 'testVal');
2 console.log( elem.removeAttribute('gameid') ); // undefined

attributes是會隨著新增或刪除attribute節點動態更新的。

property就是一個屬性，如果把DOM元素看成是一個普通的Object物件，那麼property就是一個以名值對(name=”value”)的形式存放在Object中的屬性。要新增和刪除property也簡單多了，和普通的物件沒啥分別：

1 elem.gameid = 880; // 新增
2 console.log( elem.gameid ) // 獲取
3 delete elem.gameid // 刪除

之所以attribute和property容易混倄在一起的原因是，很多attribute節點還有一個相對應的property屬性，比如上面的div元素的id和class既是attribute，也有對應的property，不管使用哪種方法都可以訪問和修改。

1 console.log( elem.getAttribute('id') ); // box
2 console.log( elem.id ); // box
3 elem.id = 'hello';
4 console.log( elem.getAttribute('id') ); // hello

但是對於自定義的attribute節點，或者自定義property，兩者就沒有關係了。

1 console.log( elem.getAttribute('gameid') ); // 880
2 console.log( elem.gameid ); // undefined
3 elem.areaid = '900';
4 console.log( elem.getAttribute('areaid') ) // null

對於IE6-7來說，沒有區分attribute和property：

1 console.log( elem.getAttribute('gameid') ); // 880
2 console.log( elem.gameid ); // 880
3 elem.areaid = '900';
4 console.log( elem.getAttribute('areaid') ) // 900

很多新手朋友估計都很容易掉進這個坑中。

DOM元素一些預設常見的attribute節點都有與之對應的property屬性，比較特殊的是一些值為Boolean型別的property，如一些表單元素：

1 <input type="radio" checked="checked" id="raido">
2 var radio = document.getElementById( 'radio' );
3 console.log( radio.getAttribute('checked') ); // checked
4 console.log( radio.checked ); // true

對於這些特殊的attribute節點，只有存在該節點，對應的property的值就為true，如：

1 <input type="radio" checked="anything" id="raido">
2 var radio = document.getElementById( 'radio' );
3 console.log( radio.getAttribute('checked') ); // anything
4 console.log( radio.checked ); // true

最後為了更好的區分attribute和property，基本可以總結為attribute節點都是在HTML程式碼中可見的，而property只是一個普通的名值對屬性。

1 // gameid和id都是attribute節點
2 // id同時又可以通過property來訪問和修改
3 <div gameid="880" id="box">hello</div>
4 // areaid僅僅是property
5 elem.areaid = 900;
原載於：雨夜帶刀's Blog
本文連結：http://stylechen.com/attribute-property.html

相關文章