快捷導(dǎo)航

javascript中attribute和property的區(qū)別詳解

更新時(shí)間：2014年06月05日 11:48:47 作者：

這篇文章主要介紹了javascript中attribute和property的區(qū)別詳解,attribute和property對(duì)新手來(lái)說(shuō),特別容易混淆概念,本文就清晰的講解了它們的區(qū)別,需要的朋友可以參考下

DOM元素的attribute和property很容易混倄在一起，分不清楚，兩者是不同的東西，但是兩者又聯(lián)系緊密。很多新手朋友，也包括以前的我，經(jīng)常會(huì)搞不清楚。

attribute翻譯成中文術(shù)語(yǔ)為“特性”，property翻譯成中文術(shù)語(yǔ)為“屬性”，從中文的字面意思來(lái)看，確實(shí)是有點(diǎn)區(qū)別了，先來(lái)說(shuō)說(shuō)attribute。

attribute是一個(gè)特性節(jié)點(diǎn)，每個(gè)DOM元素都有一個(gè)對(duì)應(yīng)的attributes屬性來(lái)存放所有的attribute節(jié)點(diǎn)，attributes是一個(gè)類數(shù)組的容器，說(shuō)得準(zhǔn)確點(diǎn)就是NameNodeMap，總之就是一個(gè)類似數(shù)組但又和數(shù)組不太一樣的容器。attributes的每個(gè)數(shù)字索引以名值對(duì)(name=”value”)的形式存放了一個(gè)attribute節(jié)點(diǎn)。

復(fù)制代碼代碼如下:

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

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

復(fù)制代碼代碼如下:

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

可以這樣來(lái)訪問(wèn)attribute節(jié)點(diǎn)：

復(fù)制代碼代碼如下:

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

但是IE6-7將很多東西都存放在attributes中，上面的訪問(wèn)方法和標(biāo)準(zhǔn)瀏覽器的返回結(jié)果又不同。通常要獲取一個(gè)attribute節(jié)點(diǎn)直接用getAttribute方法：

復(fù)制代碼代碼如下:

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

要設(shè)置一個(gè)attribute節(jié)點(diǎn)使用setAttribute方法，要?jiǎng)h除就用removeAttribute：

復(fù)制代碼代碼如下:

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

attributes是會(huì)隨著添加或刪除attribute節(jié)點(diǎn)動(dòng)態(tài)更新的。
property就是一個(gè)屬性，如果把DOM元素看成是一個(gè)普通的Object對(duì)象，那么property就是一個(gè)以名值對(duì)(name=”value”)的形式存放在Object中的屬性。要添加和刪除property也簡(jiǎn)單多了，和普通的對(duì)象沒(méi)啥分別：

復(fù)制代碼代碼如下:

elem.gameid = 880; // 添加
console.log( elem.gameid ) // 獲取
delete elem.gameid // 刪除

之所以attribute和property容易混倄在一起的原因是，很多attribute節(jié)點(diǎn)還有一個(gè)相對(duì)應(yīng)的property屬性，比如上面的div元素的id和class既是attribute，也有對(duì)應(yīng)的property，不管使用哪種方法都可以訪問(wèn)和修改。

復(fù)制代碼代碼如下:

console.log( elem.getAttribute('id') ); // box
console.log( elem.id ); // box
elem.id = 'hello';
console.log( elem.getAttribute('id') ); // hello

但是對(duì)于自定義的attribute節(jié)點(diǎn)，或者自定義property，兩者就沒(méi)有關(guān)系了。

復(fù)制代碼代碼如下:

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

對(duì)于IE6-7來(lái)說(shuō)，沒(méi)有區(qū)分attribute和property：

復(fù)制代碼代碼如下:

console.log( elem.getAttribute('gameid') ); // 880
console.log( elem.gameid ); // 880
elem.areaid = '900';
console.log( elem.getAttribute('areaid') ) // 900

很多新手朋友估計(jì)都很容易掉進(jìn)這個(gè)坑中。
DOM元素一些默認(rèn)常見(jiàn)的attribute節(jié)點(diǎn)都有與之對(duì)應(yīng)的property屬性，比較特殊的是一些值為Boolean類型的property，如一些表單元素：

復(fù)制代碼代碼如下:

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

對(duì)于這些特殊的attribute節(jié)點(diǎn)，只有存在該節(jié)點(diǎn)，對(duì)應(yīng)的property的值就為true，如：

復(fù)制代碼代碼如下:

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

最后為了更好的區(qū)分attribute和property，基本可以總結(jié)為attribute節(jié)點(diǎn)都是在HTML代碼中可見(jiàn)的，而property只是一個(gè)普通的名值對(duì)屬性。

復(fù)制代碼代碼如下:

// gameid和id都是attribute節(jié)點(diǎn)
// id同時(shí)又可以通過(guò)property來(lái)訪問(wèn)和修改
<div gameid="880" id="box">hello</div> 
// areaid僅僅是property
elem.areaid = 900;

您可能感興趣的文章: