attribute和property的區別

2022-03-07 19:21:16 字數 3389 閱讀 7519

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

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

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

<

div

class

="box"

id="box"

gameid

="880"

>hello

div>

上面的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方法:

console.log( 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 ); //

boxelem.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:

console.log( elem.getattribute('gameid') ); //

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

880elem.areaid = '900';

console.log( elem.getattribute('areaid') ) //

900

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

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

<

input

type

="radio"

checked

="checked"

id="raido"

>

var radio = document.getelementbyid( 'radio' );

console.log( radio.getattribute('checked') ); // checked

console.log( radio.checked ); // true

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

<

input

type

="radio"

checked

="anything"

id="raido"

>

var radio = document.getelementbyid( 'radio' );

console.log( radio.getattribute('checked') ); // anything

console.log( radio.checked ); // true

最後為了更好的區分attribute和property,基本可以總結為attribute節點都是在html**中可見的,而property只是乙個普通的名值對屬性。

//

gameid和id都是attribute節點

//id同時又可以通過property來訪問和修改

hello

//areaid僅僅是property

elem.areaid = 900;

**自:雨夜帶刀's blog

Attribute 和 Parameter 的區別

request.getparameter取得web客戶端 jsp 到web服務端的http請求資料 get post 只能是string型別的,而且httpservletrequest沒有對應的setparameter 方法。如利用href url 和form請求伺服器時,表單資料通過paramet...

property和attribute的區別

property是指類向外提供的資料區域。而attribute則是描述物件在編譯時或執行時屬性的,分為固有型和使用者自定義型,其中使用者自定義型可以利用reflection在執行期獲取。這兩者是有本質區別的。資料上說二者乙個是service的屬性,而另乙個是inte ce的。第一種好象更準確,摘要如...

Property和attribute的區別

property和attribute的區別 attribute和property都可以翻譯成 屬性 有的地方用attribute表示 屬性 有的地方又在用property,初 學者常常在這兩個單詞間 迷失 甚至認為二者沒有區別,是一樣的。可是attribute不等於property。二者之間到底有何...