初學(xué)者對(duì)于DOM元素的attribute和property很容易混倄在一起，分不清楚熊痴，兩者是不同的東西踢俄，但是兩者又聯(lián)系緊密。
1层扶、解釋
attribute : 翻譯成中文術(shù)語(yǔ)為“特性”
property翻譯成中文術(shù)語(yǔ)為“屬性”
2箫章、attribute
attribute是一個(gè)特性節(jié)點(diǎn)，每個(gè)DOM元素都有一個(gè)對(duì)應(yīng)的attributes屬性來(lái)存放所有的attribute節(jié)點(diǎn)镜会，attributes是一個(gè)類數(shù)組的容器炉抒，說(shuō)得準(zhǔn)確點(diǎn)就是NameNodeMap
通常要獲取一個(gè)attribute節(jié)點(diǎn)直接用getAttribute(attr)方法
通常要設(shè)置一個(gè)attribute節(jié)點(diǎn)直接用setAttribute(attr, value)方法
attributes是會(huì)隨著添加或刪除attribute節(jié)點(diǎn)動(dòng)態(tài)更新的。
3稚叹、property
property就是一個(gè)屬性焰薄，如果把DOM元素看成是一個(gè)普通的Object對(duì)象拿诸，那么property就是一個(gè)以名值對(duì)(name=”value”)的形式存放在Object中的屬性
獲取屬性或者是設(shè)置屬性就像正常操作對(duì)象一樣即可
4、區(qū)別
attribute和property容易混倄在一起的原因是塞茅，很多attribute節(jié)點(diǎn)還有一個(gè)相對(duì)應(yīng)的property屬性亩码，比如class屬性，id屬性野瘦。但是對(duì)于自定義的attribute節(jié)點(diǎn)和自定義的property描沟，兩者就沒(méi)有關(guān)系了
也可以這么理解
Attribute拿的是html屬性的值，而prop是DOM接口鞭光，存取如何是由DOM規(guī)范定義的吏廉，跟html上的值是不一定是對(duì)應(yīng)的。比如 input.value 你可以改變惰许，但是 input.getAttribute('value') 你拿到的總是html上的屬性的值席覆。再如 a.href 得到總是絕對(duì)地址，而 a.getAttribute('value') 則是 html上寫(xiě)的地址汹买，原來(lái)是什么就是什么
5佩伤、特殊
DOM元素一些默認(rèn)常見(jiàn)的attribute節(jié)點(diǎn)都有與之對(duì)應(yīng)的property屬性，比較特殊的是一些值為Boolean類型的property晦毙，如一些表單元素生巡。對(duì)于這些特殊的attribute節(jié)點(diǎn)，只要存在該節(jié)點(diǎn)见妒，對(duì)應(yīng)的property的值就為true
6孤荣、例子
<input type="text" class="bbb ccc" value="測(cè)試" id="inputId" create="create">
<input type="radio" class="bbb ccc" id="radioId" checked="checked">
<script>
var input = document.getElementById("inputId")
var inputRadio = document.getElementById('radioId')
console.log(input.attributes)
console.log(input.id) //inputId
console.log(input.getAttribute('id')) //inputId
input.setAttribute('id', 'ceId')
console.log(input.id) //ceId
console.log(input.getAttribute('id')) //ceId
input.id = 'shiId'
console.log(input.id) //shiId
console.log(input.getAttribute('id')) //shiId
console.log(input.getAttribute("value")) //測(cè)試
console.log(input.value) //測(cè)試
input.value = 'kkk'
console.log(input.value) //kkk
console.log(input.getAttribute("value")) //測(cè)試
input.setAttribute('value', '嘿嘿')
console.log(input.getAttribute("value")) //嘿嘿
console.log(input.value) //kkk
console.log(inputRadio.checked) //true
console.log(inputRadio.getAttribute('checked')) //checked
input.checked = '456'
console.log(inputRadio.checked) //true
console.log(inputRadio.getAttribute('checked')) //checked
inputRadio.setAttribute('checked', '123')
console.log(inputRadio.checked) //true
console.log(inputRadio.getAttribute('checked')) //123
</script>
結(jié)果分析:
(1)、上述的id節(jié)點(diǎn)還有一個(gè)相對(duì)應(yīng)的property屬性,所以它們是同步的须揣。類似的屬性還有class垃环、 for...
但是需要注意的是class、 for在js中都是關(guān)鍵字返敬，在獲取或者是這是對(duì)應(yīng)的property值時(shí)對(duì)應(yīng)的是className遂庄、htmlFor
(2)、上述的value節(jié)點(diǎn)就是html屬性的值與DOM規(guī)范定義的存取不是一一對(duì)應(yīng)的劲赠，導(dǎo)致了在后來(lái)的修改中涛目，它們的值并不會(huì)一致。
(3)凛澎、還有一些通過(guò)setAttribute或者是通過(guò)DOM對(duì)象設(shè)置的屬性霹肝，它們根本就是不相通的。比如說(shuō)你通過(guò)setAttribute設(shè)置了一個(gè)新屬性,其在DOM對(duì)象中是取不到的塑煎。反之亦然沫换。
(4)、例子中的<input type='radio' class="bbb ccc" id="radioId" checked="checked" />通過(guò)DOM操作獲得的屬性值是true最铁，通過(guò)getAttribute得到的值是真實(shí)的value,并且對(duì)于這些特殊的節(jié)點(diǎn)(checked disabled...) 是不能通過(guò)DOM操作改變其值讯赏，只可以通過(guò)setAttribute給變其值垮兑。
7、補(bǔ)充
classList:該屬性值是DOMTokenList對(duì)象漱挎，一個(gè)只讀的類數(shù)組對(duì)象 重點(diǎn)是這個(gè)對(duì)象實(shí)時(shí)地代表了元素的類名集合系枪，并非是一個(gè)靜態(tài)快照
8、 jquery中的attr()與prop()
jquery中的attr()與prop()的區(qū)別使用正是此上原因磕谅，attr()對(duì)應(yīng)原生js中的attribute特性節(jié)點(diǎn)私爷，prop()對(duì)應(yīng)property屬性
