[翻译]HTML属性和DOM属性的区别？

时间：2023-04-02 18:52:04 HTML

原文：http://joji.me/zh-cn/blog/htm...我们在通过js处理DOM对象的时候，很容易混淆attribute（特性）和property（属性）。document.getElementById('test').getAttribute('id'),$('#test').attr('id'),document.getElementById('test').id和$('#test')。prop('id')这三个都返回相同的id：“test”。在本文中，我将解释属性和属性之间的区别。Attribute（属性）attribute属性是由HTML定义的，所有出现在HTML标签中的描述节点都是attribute属性。

document.getElementById('test').attributes;//返回：[custom-attr="hello",class=“按钮”的类型，id="test"]属性始终为字符串类型。以上面的DIV为例，document.getElementById('test').getAttribute('custom-attr')or$('#test').attr('custom-attr')总是返回“1ofstringtype”.Property（属性）property属性属于DOM对象，DOM的本质就是javascript中的对象。我们可以像在js中操作普通对象一样获取和设置DOM对象的属性，property属性可以是任意类型。document.getElementById('测试').foo=1;//设置属性：foo为数字类型：1document.getElementById('test').foo;//获取属性值，返回数字：1$('#test').prop('foo');//使用jquery获取属性值，returnnumber:1$('#test').prop('foo',{age:23,name:'John'});//使用jquery设置一个名为foo的对象document.getElementById('test').foo.age;//返回数字类型：23document.getElementById('test').foo.name;//returnstringtype:"John"译者注：这里的属性可以是任意类型，指的是我们给DOM对象添加的属性。对于DOM对象的原始属性，类似于name属性，无论我们设置什么类型的值，最终返回的都是字符类型。另外，我们在获取HTML5定义的data属性时，获取的值也是一个字符串。

,ele.dataset.id//string33非自定义属性属性与属性之间存在1:1的映射关系，如：id,class,title,ETC。

document.getElementById('test').id;//返回字符串：“test”document.getElementById('test')。班级名称;//返回字符串："button"document.getElementById('test').foo;//返回undefined因为foo是自定义的attr特性注意：当我们通过property属性设置或获取class时，需要使用“className”，因为class在js中是关键字。译者注：第二点是指当我们在html中编写非自定义属性特性时，DOM对象会自动映射对应的属性。大多数情况下，当非自定义属性（attribute）发生变化时，其对应的属性（property）也会发生变化。