平時(shí)，properties 和 attributes 這兩個(gè)單詞經(jīng)常會(huì)出現(xiàn)脑奠。我對(duì)這兩個(gè)詞也是傻傻分不清察郁，平常都只是單純地把這兩個(gè)詞都理解為 “ 屬性 ”弊知。可是今天在 jQuery 中讨阻，卻看到了兩個(gè)不同的方法偎蘸，一個(gè)是 prop()，另一個(gè)是 attr() 奄侠。鑒于之前這兩個(gè)詞在我腦海里模糊的定義卓箫，我便開(kāi)始我的探索之旅。
1. 詞義理解
作為一個(gè)軟件工程專(zhuān)業(yè)的學(xué)生垄潮，沒(méi)想到看到的第一篇文章就是從軟件工程的角度去解釋這兩個(gè)詞的區(qū)別烹卒，個(gè)人挺贊同該文章中的解釋。以下為原文章博主的觀點(diǎn)：
在軟件工程的領(lǐng)域里弯洗，經(jīng)陈眉保可以看到這兩個(gè)詞：atrribute和property，而且在中文中均可被翻譯為“屬性”牡整，那么這兩個(gè)詞到底有什么區(qū)別呢藐吮。個(gè)人意見(jiàn)如下：
Property著重強(qiáng)調(diào)具有多少參數(shù)，或事物擁有的參數(shù)果正，不用它來(lái)特指某事物炎码，只強(qiáng)調(diào)“有”。在軟件工程中比如properties配置文件秋泳，系統(tǒng)環(huán)境變量潦闲，系統(tǒng)配置參數(shù)等。
Attribute 著重強(qiáng)調(diào)某個(gè)事物固有的屬性迫皱，或區(qū)別于其他事物的特征歉闰，強(qiáng)調(diào)“專(zhuān)”辖众。從宏觀上講，比方說(shuō)Car類(lèi)和敬，是什么顏色（Color）凹炸；多大排量(Displacement)；什么品牌（Brand）等昼弟，通過(guò)這些特征啤它，可以區(qū)分出它是一輛什么樣的汽車(chē)。
Attribue和Property從本義上講舱痘，Attribute可翻譯為屬性变骡，特征；而Property可翻譯為屬性芭逝，資產(chǎn)塌碌。
在UML中Property更傾向于宏觀的屬性描述或?qū)傩缘慕y(tǒng)指，Attribute則指具體的類(lèi)的屬性旬盯。
2. 從DOM的角度看
相信看了第一點(diǎn)之后台妆，大家對(duì)這兩個(gè)詞的定義應(yīng)該會(huì)變得清晰一些。現(xiàn)在我們回過(guò)頭來(lái)胖翰，看一看兩者在DOM中的區(qū)別接剩。經(jīng)過(guò)一番學(xué)習(xí)，我得出了以下的結(jié)論：
- property 和 attribute 是兩個(gè)不同的概念泡态，屬于不同的范圍搂漠；
- property 是DOM中的屬性，是JavaScript里的對(duì)象某弦；
- attribute 是HTML標(biāo)簽上的特性，它的值只能夠是字符串而克。
當(dāng)在編寫(xiě)HTML源代碼時(shí)靶壮，我們可以在HTML元素上定義屬性。一旦瀏覽器解析此代碼员萍，將創(chuàng)建一個(gè)HTMLInputElement對(duì)象腾降，該對(duì)象將包含數(shù)十個(gè)屬性，如：childElementCount碎绎，childNodes螃壤，children，classList筋帖，className奸晴， clientHeight 等，此時(shí)說(shuō)的這些對(duì)象屬性即為properties日麸。而我們?cè)贖TML標(biāo)簽上定義的屬性寄啼，則為attributes。
下面我們來(lái)看一段代碼
/* HTML */
<input type="text" value="default" id="myInput" data="mydata">
/* Javascript */
var myInput = document.getElementById('myInput');
console.log(myInput.type) // "text"
console.log(myInput.value) // "default"
console.log(myInput.id) // "myInput"
console.log(myInput.data) // "undefined"
console.dir(myInput.attributes) // 輸出一個(gè)NamedNodeMap對(duì)象，其中包括了type, value, id ,data 四個(gè)屬性
從上面的這些代碼墩划，我們可以知道涕刚，對(duì)于給定的 DOM 節(jié)點(diǎn)對(duì)象，properties 是該對(duì)象的屬性乙帮，而 attributes 是該對(duì)象 attributes 屬性中的元素杜漠。attributes是屬于property的一個(gè)子集，它保存了HTML標(biāo)簽上定義屬性察净。如果再進(jìn)一步探索attitudes中的每一個(gè)屬性碑幅，會(huì)發(fā)現(xiàn)它們并不是簡(jiǎn)單的對(duì)象，它是一個(gè)Attr類(lèi)型的對(duì)象塞绿，擁有NodeType沟涨、NodeName等屬性。還有一點(diǎn)需要注意的是异吻，打印attribute屬性不會(huì)直接得到對(duì)象的值裹赴，而是獲取一個(gè)包含屬性名和值的字符串。
console.log(myInput.attributes.data); // " data='mydata' "
另外诀浪，當(dāng)為一個(gè)給定的 HTML 元素創(chuàng)建一個(gè) DOM 節(jié)點(diǎn)時(shí)棋返，該節(jié)點(diǎn)的許多 properties 會(huì)和與其具有想相同或相似名稱(chēng)的attributes存在關(guān)聯(lián)，但這種關(guān)系并不是一對(duì)一的關(guān)系雷猪。例如：
<input id="the-input" type="text" value="Name:">
上面這行代碼對(duì)應(yīng)的DOM節(jié)點(diǎn)擁有 id睛竣，type，value 這三個(gè)屬性：
在id屬性中求摇， property 是 attribute的映射屬性射沟。獲取property，則讀取attribute与境，設(shè)置property验夯，則寫(xiě)入attribute。id 是一個(gè)純映射的 property 屬性摔刁，它的值不會(huì)主動(dòng)修改挥转，也不會(huì)受到限制。
在type屬性中共屈，property 是 attribute的映射屬性绑谣。獲取property，則讀取attribute拗引，設(shè)置property借宵，則寫(xiě)入attribute。但type不是一個(gè)純映射的屬性寺擂，因?yàn)樗芟抻谝阎担ɡ缦疚瘢琲nput 的有效 type）泼掠。例如，你編寫(xiě)了代碼<input type="foo">垦细，然后調(diào)用 theInput.getAttribute（“type”）返回?cái)?shù)據(jù)择镇，結(jié)果返回的是 “ text ”，而不是 “ foo ” 括改。
相反腻豌，在value屬性中， property 不映射到 attribute嘱能，而且 property 為 input 中輸入的當(dāng)前值 吝梅。當(dāng)用戶手動(dòng)更改輸入框的值是， value 的 property 將映射此更改惹骂。
下面我們?cè)賮?lái)看一段代碼
/* HTML */
<input id="the-input" type="text" value="Name:">
/* Javascript */
var theInput = document.getElementById("the-input");
console.log(theInput.value); // "Name:"
// 1苏携、在輸入框中輸入”John“
console.log(theInput.value); // "John"
console.log(theInput.getAttribute('value')); // "Name:"
console.log(theInput.defaultValue); // "Name:"
// 2、修改attributes
theInput.setAttribute('value','Tom'); // 輸入框文本變?yōu)?"Tom"
console.log(theInput.value); // "Tom" （ propertie 發(fā)生改變 ）
//3对粪、修改properties
theInput.value = "Jack"; // 輸入框文本變?yōu)?"Jack"
console.log(theInput.getAttribute('value')); // "Tom:" （ attribute 不發(fā)生改變 ）
在value屬性中右冻，property映射輸入框內(nèi)的當(dāng)前文本內(nèi)容，而attribute包含HTML源代碼中的value屬性的初始文本內(nèi)容著拭。所以如果你想知道文本框內(nèi)的內(nèi)容纱扭，請(qǐng)?jiān)L問(wèn)property屬性。但是儡遮，如果您想知道文本框的初始值是什么乳蛾，請(qǐng)?jiān)L問(wèn)attribute屬性”杀遥或者你可以使用defaultValue屬性肃叶，這是value屬性的最初的映射。
有一些 properties 可直接反映他們的attributes（如 rel爱榔，id ）被环，但也有些是用稍微不同的名稱(chēng)直接映射（如 htmlFor 映射 for 屬性，className 映射 class 屬性）详幽，也有許多可以映射它們的屬性，但受到修改限制（如 src浸锨，href唇聘，disabled，multiple）柱搜。
3. 總結(jié)
- property 是DOM節(jié)點(diǎn)的屬性迟郎，是JavaScript里的對(duì)象；
- attribute 是HTML標(biāo)簽上的特性聪蘸，表現(xiàn)為DOM節(jié)點(diǎn)的attributes屬性宪肖，它的值只能夠是字符串表制；
- attribute 和 property之間的數(shù)據(jù)綁定是單向的，修改 attribute 會(huì)導(dǎo)致 property發(fā)生修改控乾；
- 更改property和attribute上的任意值么介，都會(huì)將更新反映到HTML頁(yè)面中。
