JS中attribute和property的区别
2020/11/13 11:53:02 阅读：2074
发布者：2074
property 和 attribute非常容易混淆，两个单词的中文翻译也都非常相近（property：属性，attribute：特性），但实际上，二者是不同的东西，属于不同的范畴。
property是DOM中的属性，是JavaScript里的对象；
attribute是HTML标签上的特性，它的值只能够是字符串；
而Property是这个DOM元素作为对象，其附加的内容，例如childNodes、firstChild等。
这是由于，每一个DOM对象都会有它默认的基本属性，而在创建的时候，它只会创建这些基本属性，我们在TAG标签中自定义的属性是不会直接放到DOM中的。
那自定义的”title1“去哪里了呢？ title1”被放在了attributes这个对象里，这个对象按顺序记录了我们在TAG中定义的属性和属性的数量。
从这里就可以看出，attributes是属于property的一个子集，它保存了HTML标签上定义属性。
如果再进一步探索attitudes中的每一个属性，会发现它们并不是简单的对象，它是一个Attr类型的对象，拥有NodeType、NodeName等属性。关于这一点，稍后再研究。注意，打印attribute属性不会直接得到对象的值，而是获取一个包含属性名和值的字符串
HTML标签中定义的属性和值会保存该DOM对象的attributes属性里面；
这些attribute属性的JavaScript中的类型是Attr，而不仅仅是保存属性名和值这么简单；
<div id="div1" class="divClass" title="divTitle" title1="divTitle1">100</div>
这个div里面的“title1”就不会变成Property。
即，只要是DOM标签中出现的属性（html代码），都是Attribute。然后有些常用特性（id、class、title等），会被转化为Property。可以很形象的说，这些特性/属性，是“脚踏两只船”的。
DOM有其默认的基本属性，而这些属性就是所谓的“property”，无论如何，它们都会在初始化的时候再DOM对象上创建。
如果在TAG对这些属性进行赋值，那么这些值就会作为初始值赋给DOM的同名property。
attribute取值
getAttribute()可以取得任何特性，不管是标准的还是自定义的。但是这个方法的浏览器兼容性有问题，有些浏览器可能会获取属性Property的值。
attribute赋值
property取值
Property赋值
对属性Property可以赋任何类型的值，而对特性Attribute只能赋值字符串！
另外，对于属性Property的赋值在IE中可能会引起循环引用，内存泄漏。为了防止这个问题，jQuery.data()做了特殊处理，解耦了数据和DOM对象。
in1.value='new value of prop';
console.log(in1.value); // 'new value of prop'
console.log(in1.attributes.value); // 'value="1"'
此时，页面中的输入栏的值变成了“new value of prop”，而propety中的value也变成了新的值，但attributes却仍然是“1”。从这里可以推断，property和attribute的同名属性的值并不是双向绑定的。
in2.setAttribute('value','ni')
console.log(in2.value); //ni
console.log(in2.attributes.value); //value='ni'
由此，可得出结论：
property能够从attribute中得到同步；
attribute不会同步property上的值；
attribute和property之间的数据绑定是单向的，attribute->property；
更改property和attribute上的任意值，都会将更新反映到HTML页面中；
【 微信扫一扫 】
