attr ，prop ，和data 的區別

在面試時遇到了attr()，prop()，和data()的區別這個問題，給胡說八道了一通，感覺很慚愧，特查詢了相關資料，做了一些總結。

1、使用方式不同

對於html元素本身就帶有的固有屬性，在處理時，使用prop方法。

對於html元素我們自己自定義的dom屬性，在處理時，使用attr方法。

這個例子裡元素的dom屬性有「href、target和class"，這些屬性就是元素本身就帶有的屬性，也是w3c標準裡就包含有這幾個屬性，或者說在ide裡能夠智慧型提示出的屬性，這些就叫做固有屬性。處理這些屬性時，建議使用prop方法。刪除

這個例子裡元素的dom屬性有「href、id和action」，很明顯，前兩個是固有屬性，而後面乙個「action」屬性是我們自己自定義上去的，元素本身是沒有這個屬性的。這種就是自定義的dom屬性。處理這些屬性時，建議使用attr方法。

2、實現方式不同

attr()依賴的是element物件的element.getattribute( attribute ) 和 element.setattribute( attribute, value )

// 相當於 msg.setattribute("data_id", 145);
$msg.attr("data_id", 145);
// 相當於 msg.getattribute("data_id");
var dataid = $msg.attr("data_id"); // 145

prop()依賴的是js原生的 element[property] 和 element[property] = value

// 相當於 msg["pid"] = "pid值" 或 msg.pid = "pid值"
$msg.prop("pid", "pid值");
// 相當於 msg["pid"] 或 msg.pid 
var testprop = $msg.prop("pid"); // pid值