国产色在线视频-国产色综合一区二区三区-国产身材极品喷水 在线播放-国产深夜福利视频观看-国产深夜福利视频在线-国产深夜福利视频在线播放

JS中attribute和property的區(qū)別

2020/11/13 11:53:02   閱讀:2496    發(fā)布者:2496


property 和 attribute非常容易混淆,兩個單詞的中文翻譯也都非常相近(property:屬性,attribute:特性),但實際上,二者是不同的東西,屬于不同的范疇。


property是DOM中的屬性,是JavaScript里的對象;

attribute是HTML標簽上的特性,它的值只能夠是字符串;


簡單理解,Attribute就是dom節(jié)點自帶的屬性,例如html中常用的id、class、title、align等。

而Property是這個DOM元素作為對象,其附加的內容,例如childNodes、firstChild等。

這是由于,每一個DOM對象都會有它默認的基本屬性,而在創(chuàng)建的時候,它只會創(chuàng)建這些基本屬性,我們在TAG標簽中自定義的屬性是不會直接放到DOM中的。

那自定義的”title1“去哪里了呢? title1”被放在了attributes這個對象里,這個對象按順序記錄了我們在TAG中定義的屬性和屬性的數(shù)量。

從這里就可以看出,attributes是屬于property的一個子集,它保存了HTML標簽上定義屬性。


如果再進一步探索attitudes中的每一個屬性,會發(fā)現(xiàn)它們并不是簡單的對象,它是一個Attr類型的對象,擁有NodeType、NodeName等屬性。關于這一點,稍后再研究。注意,打印attribute屬性不會直接得到對象的值,而是獲取一個包含屬性名和值的字符串

HTML標簽中定義的屬性和值會保存該DOM對象的attributes屬性里面;

這些attribute屬性的JavaScript中的類型是Attr,而不僅僅是保存屬性名和值這么簡單;


常用的Attribute,例如id、class、title等,已經(jīng)被作為Property附加到DOM對象上,可以和Property一樣取值和賦值。但是自定義的Attribute,就不會有這樣的特殊優(yōu)待,例如:

<div id="div1" class="divClass" title="divTitle" title1="divTitle1">100</div>
這個div里面的“title1”就不會變成Property。

即,只要是DOM標簽中出現(xiàn)的屬性(html代碼),都是Attribute。然后有些常用特性(id、class、title等),會被轉化為Property??梢院苄蜗蟮恼f,這些特性/屬性,是“腳踏兩只船”的。


最后注意:“class”變成Property之后叫做“className”,因為“class”是ECMA的關鍵字。

DOM有其默認的基本屬性,而這些屬性就是所謂的“property”,無論如何,它們都會在初始化的時候再DOM對象上創(chuàng)建。
如果在TAG對這些屬性進行賦值,那么這些值就會作為初始值賦給DOM的同名property。

attribute取值

getAttribute()可以取得任何特性,不管是標準的還是自定義的。

但是這個方法的瀏覽器兼容性有問題,有些瀏覽器可能會獲取屬性Property的值。


attribute賦值


用setAttrbute()賦值,任何Attribute都可以,包括自定義的。而且,賦值的Attribute會立刻表現(xiàn)到DOM元素上。

property取值


屬性取值很簡單。取任何屬性的只,用“.”就可以

Property賦值

對屬性Property可以賦任何類型的值,而對特性Attribute只能賦值字符串!

另外,對于屬性Property的賦值在IE中可能會引起循環(huán)引用,內存泄漏。為了防止這個問題,jQuery.data()做了特殊處理,解耦了數(shù)據(jù)和DOM對象。

in1.value='new value of prop';

console.log(in1.value);               // 'new value of prop'
console.log(in1.attributes.value);         // 'value="1"'
此時,頁面中的輸入欄的值變成了“new value of prop”,而propety中的value也變成了新的值,但attributes卻仍然是“1”。從這里可以推斷,property和attribute的同名屬性的值并不是雙向綁定的。
 in2.setAttribute('value','ni')
    console.log(in2.value);          //ni
    console.log(in2.attributes.value); //value='ni'

由此,可得出結論:

property能夠從attribute中得到同步;
attribute不會同步property上的值;
attribute和property之間的數(shù)據(jù)綁定是單向的,attribute->property;
更改property和attribute上的任意值,都會將更新反映到HTML頁面中;