初学者对于DOM元素的attribute和property很容易混倄在一起，分不清楚，两者是不同的东西，但是两者又联系紧密。
1、解释
attribute : 翻译成中文术语为“特性”
property翻译成中文术语为“属性”
2、attribute
attribute是一个特性节点，每个DOM元素都有一个对应的attributes属性来存放所有的attribute节点，attributes是一个类数组的容器，说得准确点就是NameNodeMap
通常要获取一个attribute节点直接用getAttribute(attr)方法
通常要设置一个attribute节点直接用setAttribute(attr, value)方法
attributes是会随着添加或删除attribute节点动态更新的。
3、property
property就是一个属性，如果把DOM元素看成是一个普通的Object对象，那么property就是一个以名值对(name=”value”)的形式存放在Object中的属性
获取属性或者是设置属性就像正常操作对象一样即可
4、区别
attribute和property容易混倄在一起的原因是，很多attribute节点还有一个相对应的property属性，比如class属性，id属性。但是对于自定义的attribute节点和自定义的property，两者就没有关系了
也可以这么理解
Attribute拿的是html属性的值，而prop是DOM接口，存取如何是由DOM规范定义的，跟html上的值是不一定是对应的。比如 input.value 你可以改变，但是 input.getAttribute('value') 你拿到的总是html上的属性的值。再如 a.href 得到总是绝对地址，而 a.getAttribute('value') 则是 html上写的地址，原来是什么就是什么
5、特殊
DOM元素一些默认常见的attribute节点都有与之对应的property属性，比较特殊的是一些值为Boolean类型的property，如一些表单元素。对于这些特殊的attribute节点，只要存在该节点，对应的property的值就为true
6、例子
<input type="text" class="bbb ccc" value="测试" 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")) //测试
console.log(input.value) //测试
input.value = 'kkk'
console.log(input.value) //kkk
console.log(input.getAttribute("value")) //测试
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>
结果分析:
(1)、上述的id节点还有一个相对应的property属性,所以它们是同步的。类似的属性还有class、 for...
但是需要注意的是class、 for在js中都是关键字，在获取或者是这是对应的property值时对应的是className、htmlFor
(2)、上述的value节点就是html属性的值与DOM规范定义的存取不是一一对应的，导致了在后来的修改中，它们的值并不会一致。
(3)、还有一些通过setAttribute或者是通过DOM对象设置的属性，它们根本就是不相通的。比如说你通过setAttribute设置了一个新属性,其在DOM对象中是取不到的。反之亦然。
(4)、例子中的<input type='radio' class="bbb ccc" id="radioId" checked="checked" />通过DOM操作获得的属性值是true，通过getAttribute得到的值是真实的value,并且对于这些特殊的节点(checked disabled...) 是不能通过DOM操作改变其值，只可以通过setAttribute给变其值。
7、补充
classList:该属性值是DOMTokenList对象，一个只读的类数组对象 重点是这个对象实时地代表了元素的类名集合，并非是一个静态快照
8、 jquery中的attr()与prop()
jquery中的attr()与prop()的区别使用正是此上原因，attr()对应原生js中的attribute特性节点，prop()对应property属性
网友评论