前端中的 Attribute & Property

爲了在翻譯上顯示出區別，Attribute通常被翻譯爲特性，Property被譯爲屬性。
在使用上面，Angular已經代表態度

Template binding works with properties and events, not attributes.
模板綁定是經過 property 和事件來工做的，而不是 attribute。

jQuery中的prop()和attr()如何選擇，衆說紛紜...

兩種主流觀點：

1. 對於一些公認的attribute和property，使用setAttribute(),理由是property會出現class映射過去爲className，名稱不統一的問題。
2. 紅寶書做者推薦操做DOM property，由於在瀏覽器上面表現的比較一致。

HTML attribute & DOM property 關係與區別

引用Angular文檔中的一段話去歸納二者的關係和區別：

HTML attribute 與 DOM property 的對比
attribute 是由 HTML 定義的。property 是由 DOM (Document Object Model) 定義的。
少許 HTML attribute 和 property 之間有着 1:1 的映射，如id。
有些 HTML attribute 沒有對應的 property，如colspan。
有些 DOM property 沒有對應的 attribute，如textContent。

廣泛原則：

1. HTML attribute 初始化 DOM property，而後它們的任務就完成了。
2. 更改 attribute 的值，至關於再次初始化DOM property 。
3. 更改 property 的值，property值改變，attribute值不變。

幾個有表明性的映射表

HTML attribute	DOM property
id	id
class	className
checked = 'checked'	checked 值爲true

廣泛原則失效的狀況

爲何說是廣泛原則呢？在低版本的ie中，操做DOM property中的value，attribute中的value也發生了改變。徹底不講道理 - -

<input type="text" value="123" id="myInput">

更改HTML attribute

myInput.setAttribute('value', 'test Attr');

瀏覽器	myInput.getAttribute('value')	myInput.value
chrome ie11 ff	test Attr	test Attr
ie8	test Attr	test Attr

更改DOM property

document.getElementById('myInput').value = 'test property';

瀏覽器	myInput.getAttribute('value')	myInput.value
chrome ie11 ff	123	test property
ie8	test property (廣泛原則下應該爲123)	test property

prop()和attr()的選擇

• prop()採用的是更改DOM property的方式，基本上對應更改DOM屬性。

原生DOM	jQuery	操做
element.value	$element.prop( name[,value])	讀寫
delete element.propertyName	$element.removeProp( propertyName )	刪除

• attr() 採用的是更改HTML attribute的方式，基本上對應DOM中提供的三個操做attribute的方法。

原生DOM	jQuery	操做
element.getAttribute(name)	$element.attr(name)	讀
element.setAttribute(name,value)	$element.attr(name ,value)	寫
delete element.removeAttribute(name)	$element.removeAttr( name )	刪除

小結

• 獲取一些標籤上面的的自定義屬性，或者一些基本不會改變的特性的時候，多數狀況下用attr()（data-*等除外）。

<form action="test.php" user-my-name="nilinli" method="post"></form>

$('form').attr('user-my-name'); // nilinli
  $('form').attr('action'); // test.php

• 其餘狀況下，操做DOM與頁面交互，通常狀況下用prop()
• 總的來講，儘可能操做DOM property，只有在沒有DOM property(自定義attribute或者沒有相關映射)，纔去操做HTML attribute。