自拍偷在线精品自拍偷,亚洲欧美中文日韩v在线观看不卡

DOM中Property和Attribute的區(qū)別

作者：elcarim
移動(dòng)開發(fā)
property 和 attribute非常容易混淆，兩個(gè)單詞的中文翻譯也都非常相近（property：屬性，attribute：特性），但實(shí)際上，二者是不同的東西，屬于不同的范疇。

[[144654]]

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

  • property是DOM中的屬性，是JavaScript里的對(duì)象；
  • attribute是HTML標(biāo)簽上的特性，它的值只能夠是字符串；

基于JavaScript分析property 和 attribute

html中有這樣一段代碼：

  1. <input id="in_1" value="1" sth="whatever"> 

簡(jiǎn)單的在html頁(yè)面上創(chuàng)建一個(gè)input輸入欄（注意在這個(gè)標(biāo)簽中添加了一個(gè)DOM中不存在的屬性“sth”），此時(shí)在JS執(zhí)行如下語句

  1. var in1 = document.getElementById('in_1'); 

執(zhí)行語句

  1. console.log(in1); 

從console的打印結(jié)果，可以看到in1含有一個(gè)名為“attributes”的屬性，它的類型是NamedNodeMap，同時(shí)還有“id”和“value”兩個(gè)基本的屬性，但沒有“sth”這個(gè)自定義的屬性。

  1. attributes: NamedNodeMap 
  2. value: "1" 
  3. id: "in_1" 

有些console可能不會(huì)打印in1上的屬性，那么可以執(zhí)行以下命令打印要觀察的屬性：

  1. console.log(in1.id);        // 'in_1' 
  2. console.log(in1.value);     // 1 
  3. console.log(in1.sth);       // undefined 

可以發(fā)現(xiàn)，標(biāo)簽中的三個(gè)屬性，只有“id”和“value”會(huì)在in1上創(chuàng)建，而“sth”不會(huì)被創(chuàng)建。這是由于，每一個(gè)DOM對(duì)象都會(huì)有它默認(rèn)的基本屬性，而在創(chuàng)建的時(shí)候，它只會(huì)創(chuàng)建這些基本屬性，我們?cè)赥AG標(biāo)簽中自定義的屬性是不會(huì)直接放到DOM中的。

我們做一個(gè)額外的測(cè)試，創(chuàng)建另一個(gè)input標(biāo)簽，并執(zhí)行類似的操作：

html：

  1. <input id="in_2"> 

JS：

  1. var in2 = document.getElementById('in_2'); 
  2. console.log(in2); 

從打印信息中可以看到：

  1. id: "in_2" 
  2. value: null 

盡管我們沒有在TAG中定義“value”，但由于它是DOM默認(rèn)的基本屬性，在DOM初始化的時(shí)候它照樣會(huì)被創(chuàng)建。由此我們可以得出結(jié)論：

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

現(xiàn)在回到***個(gè)input（“#in_1”），我們就會(huì)問，“sth”去哪里了？別急，我們把a(bǔ)ttributes這個(gè)屬性打印出來看看

  1. console.log(in2); 

上面有幾個(gè)屬性：

  1. 0: id 
  2. 1: value 
  3. 2: sth 
  4. length: 3 
  5. __proto__: NamedNodeMap 

原來“sth”被放到了attributes這個(gè)對(duì)象里面，這個(gè)對(duì)象按順序記錄了我們?cè)赥AG中定義的屬性和屬性的數(shù)量。此時(shí)，如果再將第二個(gè)input標(biāo)簽的attributes打印出來，就會(huì)發(fā)現(xiàn)只有一個(gè)“id”屬性，“length”為1。

從這里就可以看出，attributes是屬于property的一個(gè)子集，它保存了HTML標(biāo)簽上定義屬性。如果再進(jìn)一步探索attitudes中的每一個(gè)屬性，會(huì)發(fā)現(xiàn)它們并不是簡(jiǎn)單的對(duì)象，它是一個(gè)Attr類型的對(duì)象，擁有NodeType、NodeName等屬性。關(guān)于這一點(diǎn)，稍后再研究。注意，打印attribute屬性不會(huì)直接得到對(duì)象的值，而是獲取一個(gè)包含屬性名和值的字符串，如：

  1. console.log(in1.attibutes.sth);     // 'sth="whatever"' 

由此可以得出：

  • HTML標(biāo)簽中定義的屬性和值會(huì)保存該DOM對(duì)象的attributes屬性里面；
  • 這些attribute屬性的JavaScript中的類型是Attr，而不僅僅是保存屬性名和值這么簡(jiǎn)單；

那么，如果我們更改property和attribute的值會(huì)出現(xiàn)什么效果呢？執(zhí)行如下語句：

  1. in1.value = 'new value of prop'; 
  2. console.log(in1.value);             // 'new value of prop' 
  3. console.log(in1.attributes.value);  // 'value="1"' 

此時(shí)，頁(yè)面中的輸入欄的值變成了“new value of prop”，而propety中的value也變成了新的值，但attributes卻仍然是“1”。從這里可以推斷，property和attribute的同名屬性的值并不是雙向綁定的。

如果反過來，設(shè)置attitudes中的值，效果會(huì)怎樣呢？

  1. in1.attributes.value.value = 'new value of attr'; 
  2. console.log(in1.value);             // 'new value of attr' 
  3. console.log(in1.attributes.value);  // 'new value of attr' 

此時(shí)，頁(yè)面中的輸入欄得到更新，property中的value也發(fā)生了變化。此外，執(zhí)行下面語句也會(huì)得到一樣的結(jié)果

  1. in1.attributes.value.nodeValue = 'new value of attr'; 

由此，可得出結(jié)論：

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

基于jQuery分析attribute和property

那么jQuery中的attr和prop方法是怎樣的呢？

首先利用jQuery.prop來測(cè)試

  1. $(in1).prop('value', 'new prop form $'); 
  2.  
  3. console.log(in1.value);             // 'new prop form $' 
  4. console.log(in1.attributes.value);  // '1' 

輸入欄的值更新了，但attribute并未更新。

然后用jQuery.attr來測(cè)試

  1. $(in1).attr('value', 'new attr form $'); 
  2.  
  3. console.log(in1.value);             // 'new attr form $' 
  4. console.log(in1.attributes.value);  // 'new attr form $' 

輸入欄的值更新了，同時(shí)property和attribute都更新了。

從上述測(cè)試的現(xiàn)象可以推斷，jQuery.attr和jQuery.prop基本和原生的操作方法效果一致，property會(huì)從attribute中獲取同步，然而attribute不會(huì)從property中獲取同步。那么jQuery到底是如何實(shí)現(xiàn)的呢？

下面，我們來看看jQuery.attr和jQuery.prop的源碼。

#p#

jQuery源碼

$().prop源碼

  1. jQuery.fn.extend({ 
  2.     prop: function( name, value ) { 
  3.         return access( this, jQuery.prop, name, value, arguments.length > 1 ); 
  4.     }, 
  5.     ... // removeProp方法 
  6. }); 

$().attr源碼

  1. jQuery.fn.extend({ 
  2.     attr: function( name, value ) { 
  3.         return access( this, jQuery.attr, name, value, arguments.length > 1 ); 
  4.     }, 
  5.     ... // removeAttr方法 
  6. }); 

無論是attr還是prop，都會(huì)調(diào)用access方法來對(duì)DOM對(duì)象的元素進(jìn)行訪問，因此要研究出更多內(nèi)容，就必須去閱讀access的實(shí)現(xiàn)源碼。

jQuery.access

  1. // 這是一個(gè)多功能的函數(shù)，能夠用來獲取或設(shè)置一個(gè)集合的值 
  2. // 如果這個(gè)“值”是一個(gè)函數(shù)，那么這個(gè)函數(shù)會(huì)被執(zhí)行 
  3.  
  4. // @param elems, 元素集合 
  5. // @param fn, 對(duì)元素進(jìn)行處理的方法 
  6. // @param key, 元素名 
  7. // @param value, 新的值 
  8. // @param chainable, 是否進(jìn)行鏈?zhǔn)秸{(diào)用 
  9. // @param emptyGet, 
  10. // @param raw, 元素是否一個(gè)非function對(duì)象 
  11. var access = jQuery.access = function( elems, fn, key, value, chainable, emptyGet, raw ) { 
  12.     var i = 0,                      // 迭代計(jì)數(shù) 
  13.         length = elems.length,      // 元素長(zhǎng)度 
  14.         bulk = key == null;         // 判斷是否有特定的鍵（屬性名） 
  15.  
  16.     // 如果存在多個(gè)屬性，遞歸調(diào)用來逐個(gè)訪問這些值 
  17.     if ( jQuery.type( key ) === "object" ) { 
  18.         chainable = true; 
  19.         for ( i in key ) { 
  20.             jQuery.access( elems, fn, i, key[i], true, emptyGet, raw ); 
  21.         } 
  22.  
  23.     // 設(shè)置一個(gè)值 
  24.     } else if ( value !== undefined ) { 
  25.         chainable = true; 
  26.  
  27.         if ( !jQuery.isFunction( value ) ) {    // 如果值不是一個(gè)function 
  28.             raw = true; 
  29.         } 
  30.  
  31.         if ( bulk ) { 
  32.             // Bulk operations run against the entire set 
  33.             // 如果屬性名為空且屬性名不是一個(gè)function，則利用外部處理方法fn和value來執(zhí)行操作 
  34.             if ( raw ) { 
  35.                 fn.call( elems, value ); 
  36.                 fn = null; 
  37.  
  38.             // ...except when executing function values 
  39.             // 如果value是一個(gè)function,那么就重新構(gòu)造處理方法fn 
  40.             // 這個(gè)新的fn會(huì)將value function作為回調(diào)函數(shù)傳遞給到老的處理方法 
  41.             } else { 
  42.                 bulk = fn; 
  43.                 fn = function( elem, key, value ) { 
  44.                     return bulk.call( jQuery( elem ), value ); 
  45.                 }; 
  46.             } 
  47.         } 
  48.  
  49.         if ( fn ) { // 利用處理方法fn對(duì)元素集合中每個(gè)元素進(jìn)行處理 
  50.             for ( ; i < length; i++ ) { 
  51.                 fn( elems[i], key, raw ? value : value.call( elems[i], i, fn( elems[i], key ) ) ); 
  52.                 // 如果value是一個(gè)funciton,那么首先利用這個(gè)函數(shù)返回一個(gè)值并傳入fn 
  53.             } 
  54.         } 
  55.     } 
  56.  
  57.     return chainable ? 
  58.         elems :         // 如果是鏈?zhǔn)秸{(diào)用,就返回元素集合 
  59.  
  60.         // Gets 
  61.         bulk ? 
  62.             fn.call( elems ) : 
  63.             length ? fn( elems[0], key ) : emptyGet; 
  64. }; 

access方法雖然不長(zhǎng)，但是非常繞,要完全讀懂并不簡(jiǎn)單，因此可以針對(duì)jQuery.fn.attr的調(diào)用來簡(jiǎn)化access。

jQuery.fn.attr/ jQuery.fn.prop 中的access調(diào)用

$().attr的調(diào)用方式：

  • $().attr( propertyName ) // 獲取單個(gè)屬性
  • $().attr( propertyName, value ) // 設(shè)置單個(gè)屬性
  • $().attr( properties ) // 設(shè)置多個(gè)屬性
  • $().attr( propertyName, function ) // 對(duì)屬性調(diào)用回調(diào)函數(shù)

prop的調(diào)用方式與attr是一樣的，在此就不重復(fù)列舉。為了簡(jiǎn)單起見，在這里只對(duì)***和第二種調(diào)用方式進(jìn)行研究。

調(diào)用語句：

  1. access( this, jQuery.attr, name, value, arguments.length > 1 )； 

簡(jiǎn)化的access：

  1. // elems 當(dāng)前的jQuery對(duì)象,可能包含多個(gè)DOM對(duì)象 
  2. // fn jQuery.attr方法 
  3. // name 屬性名 
  4. // value 屬性的值 
  5. // chainable 如果value為空,則chainable為false,否則chainable為true 
  6.  
  7. var access = jQuery.access = function( elems, fn, key, value, chainable, emptyGet, raw ) { 
  8.  
  9.     var i = 0,                      // 迭代計(jì)數(shù) 
  10.         length = elems.length,      // 屬性數(shù)量 
  11.         bulk = false；               // key != null 
  12.  
  13.     if ( value !== undefined ) {    // 如果value不為空,則為設(shè)置新值,否則返回該屬性的值 
  14.         chainable = true; 
  15.         raw = true;             // value不是function 
  16.  
  17.         if ( fn ) { // fn為jQuery.attr 
  18.             for ( ; i < length; i++ ) { 
  19.                 fn( elems[i], key, value);      // jQuery.attr(elems, key, value); 
  20.             } 
  21.         } 
  22.     } 
  23.      
  24.     if(chainable) {         // value不為空,表示是get 
  25.         return elems；       // 返回元素實(shí)現(xiàn)鏈?zhǔn)秸{(diào)用 
  26.     } else { 
  27.         if(length) {        // 如果元素集合長(zhǎng)度不為零，則返回***個(gè)元素的屬性值 
  28.             return fn(elems[0], key);   // jQuery.attr(elems[0], key); 
  29.         } else { 
  30.             return emptyGet；        // 返回一個(gè)默認(rèn)值，在這里是undefined 
  31.         } 
  32.     } 
  33. }; 

通過簡(jiǎn)化代碼，可以知道，access的作用就是遍歷上一個(gè)$調(diào)用得到的元素集合，對(duì)其調(diào)用fn函數(shù)。在jQuery.attr和jQuery.prop里面，就是利用access來遍歷元素集合并對(duì)其實(shí)現(xiàn)對(duì)attribute和property的控制。access的源碼里面有多段條件轉(zhuǎn)移代碼，看起來眼花繚亂，其最終目的就是能夠?qū)崿F(xiàn)對(duì)元素集合的變量并完成不同的操作，復(fù)雜的代碼讓jQuery的接口變得更加簡(jiǎn)單，能極大提高代碼重用性，意味著減少了代碼量，提高代碼的密度從而使JS文件大小得到減少。

這些都是題外話了，現(xiàn)在回到$().attr和$().prop的實(shí)現(xiàn)?？偟恼f,這兩個(gè)原型方法都利用access對(duì)元素集進(jìn)行變量，并對(duì)每個(gè)元素調(diào)用jQuery.prop和jQuery.attr方法。要注意，這里的jQuery.prop和jQuery.attr并不是原型鏈上的方法，而是jQuery這個(gè)對(duì)象本身的方法，它是使用jQuery.extend進(jìn)行方法擴(kuò)展的（jQuery.fn.prop和jQuery.fn.attr是使用jQuery.fn.extend進(jìn)行方法擴(kuò)展的）。

下面看看這兩個(gè)方法的源碼。

jQury.attr

  1. jQuery.extend({ 
  2.     attr: function( elem, name, value ) { 
  3.         var hooks, ret, 
  4.             nType = elem.nodeType;  // 獲取Node類型 
  5.  
  6.         // 如果 elem是空或者NodeType是以下類型 
  7.         //      2: Attr, 屬性, 子節(jié)點(diǎn)有Text, EntityReference 
  8.         //      3: Text, 元素或?qū)傩灾械奈谋緝?nèi)容 
  9.         //      8: Comment, 注釋 
  10.         // 不執(zhí)行任何操作 
  11.         if ( !elem || nType === 3 || nType === 8 || nType === 2 ) { 
  12.             return; 
  13.         } 
  14.  
  15.         // 如果支持attitude方法, 則調(diào)用property方法 
  16.         if ( typeof elem.getAttribute === strundefined ) { 
  17.             return jQuery.prop( elem, name, value ); 
  18.         } 
  19.  
  20.         // 如果elem的Node類型不是元素(1) 
  21.         if ( nType !== 1 || !jQuery.isXMLDoc( elem ) ) { 
  22.             name = name.toLowerCase(); 
  23.             // 針對(duì)瀏覽器的兼容性，獲取鉤子函數(shù)，處理一些特殊的元素 
  24.             hooks = jQuery.attrHooks[ name ] || 
  25.                 ( jQuery.expr.match.bool.test( name ) ? boolHook : nodeHook ); 
  26.         } 
  27.  
  28.         if ( value !== undefined ) {        // 如果value不為undefined，執(zhí)行"SET" 
  29.  
  30.             if ( value === null ) {         // 如果value為null，則移除attribute 
  31.                 jQuery.removeAttr( elem, name );     
  32.  
  33.             } else if ( hooks && "set" in hooks && (ret = hooks.set( elem, value, name )) !== undefined ) { 
  34.                 return ret;                 // 使用鉤子函數(shù) 
  35.  
  36.             } else {                        // 使用Dom的setAttribute方法 
  37.                 elem.setAttribute( name, value + "" );      // 注意，要將value轉(zhuǎn)換為string，因?yàn)樗衋ttribute的值都是string 
  38.                 return value; 
  39.             } 
  40.  
  41.         // 如果value為undefined，就執(zhí)行"GET" 
  42.         } else if ( hooks && "get" in hooks && (ret = hooks.get( elem, name )) !== null ) { 
  43.             return ret;         // 使用鉤子函數(shù) 
  44.  
  45.         } else { 
  46.             ret = jQuery.find.attr( elem, name );   // 實(shí)際上調(diào)用了Sizzle.attr，這個(gè)方法中針對(duì)兼容性問題作出處理來獲取attribute的值 
  47.  
  48.             // 返回獲得的值 
  49.             return ret == null ? 
  50.                 undefined : 
  51.                 ret; 
  52.         } 
  53.     }, 
  54.  
  55.     ... 
  56. }); 

從代碼可以發(fā)現(xiàn)，jQuery.attr調(diào)用的是getAttribute和setAttribute方法。

jQeury.prop

  1. jQuery.extend({ 
  2.  
  3.     ...  
  4.     prop: function( elem, name, value ) { 
  5.         var ret, hooks, notxml, 
  6.             nType = elem.nodeType; 
  7.  
  8.         // 過濾注釋、Attr、元素文本內(nèi)容 
  9.         if ( !elem || nType === 3 || nType === 8 || nType === 2 ) { 
  10.             return; 
  11.         } 
  12.  
  13.         notxml = nType !== 1 || !jQuery.isXMLDoc( elem ); 
  14.  
  15.         if ( notxml ) {     // 如果不是元素 
  16.             name = jQuery.propFix[ name ] || name;  // 修正屬性名 
  17.             hooks = jQuery.propHooks[ name ];       // 獲取鉤子函數(shù) 
  18.         } 
  19.  
  20.         if ( value !== undefined ) {        // 執(zhí)行"SET" 
  21.             return hooks && "set" in hooks && (ret = hooks.set( elem, value, name )) !== undefined ? 
  22.                 ret :                       // 調(diào)用鉤子函數(shù) 
  23.                 ( elem[ name ] = value );   // 直接對(duì)elem[name]賦值 
  24.  
  25.         } else {                            // 執(zhí)行"GET" 
  26.             return hooks && "get" in hooks && (ret = hooks.get( elem, name )) !== null ? 
  27.                 ret :               // 調(diào)用鉤子函數(shù) 
  28.                 elem[ name ];       // 直接返回elem[name] 
  29.         } 
  30.     }, 
  31.  
  32.     ... 
  33. }); 

jQuery.prop則是直接對(duì)DOM對(duì)象上的property進(jìn)行操作。

通過對(duì)比jQuery.prop和jQuery.attr可以發(fā)現(xiàn)，前者直接對(duì)DOM對(duì)象的property進(jìn)行操作，而后者會(huì)調(diào)用setAttribute和getAttribute方法。setAttribute和getAttribute方法又是什么方法呢？有什么效果？

#p#

setAttribute和getAttribute

基于之前測(cè)試使用的輸入框，執(zhí)行如下代碼：

  1. in1.setAttribute('value', 'new attr from setAttribute'); 
  2.  
  3. console.log(in1.getAttribute('value'));         // 'new attr from setAttribute' 
  4. console.log(in1.value);                         // 'new attr from setAttribute' 
  5. console.log(in1.attributes.value);              // 'value=​"new attr from setAttribute"',實(shí)際是一個(gè)Attr對(duì)象 

執(zhí)行完setAttribute以后，就如同直接更改attributes中的同名屬性；
而getAttribute的結(jié)果與訪問property的結(jié)果一模一樣，而不會(huì)像直接訪問attritudes那樣返回一個(gè)Attr對(duì)象。

特殊的例子

href

然而，是不是所有標(biāo)簽，所有屬性都維持保持這樣的特性呢？下面我們看看href這個(gè)屬性/特性。

首先在html中創(chuàng)建一個(gè)

  1. <a href='page_1.html' id='a_1'></a> 

在JS腳本中執(zhí)行如下代碼：

  1. console.log(a1.href);   // 'file:///D:/GitHub/JS/html/test_01/page_1.html' 
  2. console.log(a1.getAttribute('href'));   // 'page_1.html' 

可以看到，property中保存的是絕對(duì)路徑，而attribute中保存的是相對(duì)路徑。那么，如果更改了這些值會(huì)發(fā)生什么情況呢？

更改attribute：

  1. a1.setAttribute('href', 'page_2.html');     // 相對(duì)路徑 
  2. console.log(a1.href);   // 'file:///D:/GitHub/JS/html/test_01/page_2.html' 
  3. console.log(a1.getAttribute('href'));   // 'page_2.html' 
  4.  
  5. a1.setAttribute('href', '/page_3.html');    // 根目錄路徑 
  6. console.log(a1.href);                       // 'file:///D:/page_3.html' 
  7. console.log(a1.getAttribute('href'));       // '/page_3.html' 

更改property：

  1. a1.href = 'home.html';  // 相對(duì)路徑 
  2. console.log(a1.href);   // 'file:///D:/GitHub/JS/html/test_01/home.html' 
  3. console.log(a1.getAttribute('href'));   // 'home.html' 
  4.  
  5. a1.href = '/home.html'; // 根目錄路徑 
  6. console.log(a1.href);   // 'file:///D:/home.html' 
  7. console.log(a1.getAttribute('href'));   // '/home.html' 

從這里可以發(fā)現(xiàn)，href是特殊的屬性/特性，二者是雙向綁定的，更改任意一方，都會(huì)導(dǎo)致另一方的的值發(fā)生改變。而且，這并不是簡(jiǎn)單的雙向綁定，property中的href永遠(yuǎn)保存絕對(duì)路徑，而attribute中的href則是保存相對(duì)路徑。

看到這里，attribute和property的區(qū)別又多了一點(diǎn)，然而，這又讓人變得更加疑惑了。是否還有其他類似的特殊例子呢？

id

嘗試改變property中的id：

  1. a1.id = 'new_id'; 
  2. console.log(a1.id);                     // 'new_id' 
  3. console.log(a1.getAttribute('id'));     // 'new_id' 

天呀,現(xiàn)在attribute中的id從property中的id發(fā)生了同步，數(shù)據(jù)方向變成了property <=> attribute；

disabled

再來看看disabled這個(gè)屬性，我們往***個(gè)

  1. <input id="in_1" value="1" sth="whatever" disabled='disabled'>  // 此時(shí)input已經(jīng)被禁用了 

然后執(zhí)行下面的代碼：

  1. console.log(in1.disabled);      // true 
  2. in1.setAttribute('disabled', false);    // 設(shè)置attribute中的disabled，無論是false還是null都不會(huì)取消禁用 
  3. console.log(in1);               // true 
  4. console.log(in1.getAttribute('disabled'));  // 'false' 

改變attributes中的disabled不會(huì)改變更改property，也不會(huì)取消輸入欄的禁用效果。
如果改成下面的代碼：

  1. console.log(in1.disabled);      // true 
  2. in1.disabled = false;           // 取消禁用 
  3. console.log(in1.disabled);      // false 
  4. console.log(in1.getAttribute('disabled'));  // null，attribute中的disabled已經(jīng)被移除了 

又或者：

  1. console.log(in1.disabled);      // true 
  2. in1.removeAttribute（'disabled');    // 移除attribute上的disabled來取消禁用 
  3. console.log(in1.disabled);      // false 
  4. console.log(in1.getAttribute('disabled'));  // null，attribute中的disabled已經(jīng)被移除了 

可以發(fā)現(xiàn)，將property中的disabled設(shè)置為false，會(huì)移除attributes中的disabled。這樣數(shù)據(jù)綁定又變成了，property<=>attribute;

所以property和attritude之間的數(shù)據(jù)綁定問題并不能單純地以“property<-attribute”來說明。

總結(jié)

分析了這么多，對(duì)property和attribute的區(qū)別理解也更深了，在這里總結(jié)一下：

創(chuàng)建

  • DOM對(duì)象初始化時(shí)會(huì)在創(chuàng)建默認(rèn)的基本property；
  • 只有在HTML標(biāo)簽中定義的attribute才會(huì)被保存在property的attributes屬性中；
  • attribute會(huì)初始化property中的同名屬性，但自定義的attribute不會(huì)出現(xiàn)在property中；
  • attribute的值都是字符串；

數(shù)據(jù)綁定

  • attributes的數(shù)據(jù)會(huì)同步到property上，然而property的更改不會(huì)改變attribute；
  • 對(duì)于value，class這樣的屬性/特性，數(shù)據(jù)綁定的方向是單向的，attribute->property；
  • 對(duì)于id而言，數(shù)據(jù)綁定是雙向的，attribute<=>property；
  • 對(duì)于disabled而言，property上的disabled為false時(shí)，attribute上的disabled必定會(huì)并存在，此時(shí)數(shù)據(jù)綁定可以認(rèn)為是雙向的；

使用

  • 可以使用DOM的setAttribute方法來同時(shí)更改attribute；
  • 直接訪問attributes上的值會(huì)得到一個(gè)Attr對(duì)象，而通過getAttribute方法訪問則會(huì)直接得到attribute的值；
  • 大多數(shù)情況（除非有瀏覽器兼容性問題），jQuery.attr是通過setAttribute實(shí)現(xiàn)，而jQuery.prop則會(huì)直接訪問DOM對(duì)象的property；

到這里為止，得出，property是DOM對(duì)象自身就擁有的屬性，而attribute是我們通過設(shè)置HTML標(biāo)簽而給之賦予的特性，attribute和property的同名屬性/特性之間會(huì)產(chǎn)生一些特殊的數(shù)據(jù)聯(lián)系，而這些聯(lián)系會(huì)針對(duì)不同的屬性/特性有不同的區(qū)別。

事實(shí)上，在這里，property和attribute之間的區(qū)別和聯(lián)系難以用簡(jiǎn)單的技術(shù)特性來描述，我在StackFlow上找到如下的回答，或者會(huì)更加接近于真正的答案：

These words existed way before Computer Science came around.

Attribute is a quality or object that we attribute to someone or something. For example, the scepter is an attribute of power and statehood.

Property is a quality that exists without any attribution. For example, clay has adhesive qualities; or, one of the properties of metals is electrical conductivity. Properties demonstrate themselves though physical phenomena without the need attribute them to someone or something. By the same token, saying that someone has masculine attributes is self-evident. In effect, you could say that a property is owned by someone or something.

To be fair though, in Computer Science these two words, at least for the most part, can be used interchangeably - but then again programmers usually don't hold degrees in English Literature and do not write or care much about grammar books :).

最關(guān)鍵的兩句話：

  • attribute（特性），是我們賦予某個(gè)事物的特質(zhì)或?qū)ο蟆?/li>
  • property（屬性），是早已存在的不需要外界賦予的特質(zhì)。

參考

What is the difference between attribute and property?

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

責(zé)任編輯：倪明 來源： elcarim
dompropertyattribute區(qū)別javascript
相關(guān)推薦

2025-03-10 00:00:00

property?attributeHTML

2025-03-10 11:40:00

前端開發(fā)HTML

2009-08-04 14:25:09

學(xué)習(xí)C#Attribute與P

2009-08-03 14:42:50

C#自定義控件

2010-09-09 17:19:07

HTML DOMXML DOM

2010-09-28 10:24:50

HTML DOMXML DOM

2010-06-07 16:55:00

JavaScript

2010-09-28 11:11:23

XML DOMHTML DOM

2023-10-12 08:25:18

Javaequals內(nèi)存

2021-04-11 08:21:20

Python@property裝飾器

2022-05-06 19:42:53

DOM

2021-08-04 08:33:59

TypeScriptConst Readonly

2021-01-18 07:52:08

Dom節(jié)點(diǎn)Element

2016-12-06 10:30:39

JavaScriptWriteWriteln

2009-06-29 18:32:30

Hibernate

2011-05-19 17:41:20

SenderSelf

2024-03-19 14:41:08

C#操作符開發(fā)

2010-09-28 11:22:18

Html DOM樹

2010-09-01 15:11:09

linkimportCSS

2010-09-08 09:33:09

CSSlink@import
點(diǎn)贊
收藏

51CTO技術(shù)棧公眾號(hào)