Fe-interview: [js] 第19天 "attribute"和"property"有什么不同？

[haizhilin2013]

第19天 "attribute"和"property"有什么不同？

[yxkhaha]

• property是DOM中的属性，是JavaScript里的对象
• attribute是HTML标签上的特性，它的值只能够是字符串

[tzjoke]

写源码的时候我们可以定义 attribute，然后浏览器编译后会生成对应的 DOM 对象，它会有 property

另外，attribute 的 name 大小写不敏感，而 property 的敏感

[myprelude]

"attribute"和"property" 不知道是什么 你说的是 jQuery中的 attr 和 prop 么

[AricZhu]

每一个HTML标签都有默认属性，比如input标签，默认有value属性，id属性等，而这些属性就是property。而attribute是property的一个子集，是实际定义在HTML标签上的属性，这里也包括自定义的一些属性。

[Konata9]

在操作 DOM 时，我们经常会操作 attribute 和 property。不过从两者的所属关系上来说： property 属于 DOM Object，而 atrribute 属于 HTML。

property 通常比较容易获取，并且有固定的值（当然，类似 JavaScript 的对象，我们可以添加自定义的值，只是这些不会被 DOM 所认识）。比如 el.id、el.value、el.style 都是 property 而设置也只需要 el.id=newId 即可。attribute 的值不是固定的，我们可以自己为 DOM 添加需要的属性（以前常常用来存放数据或者标志位，在 HTML5 有了 data-* 的属性后，一般就利用 data-* 来存放数据了）。对于 attribute 的设定和获取我们使用 setAttribute 和 getAttribute 两个方法。

在书写方面 property 对于大小写敏感；而 attribute 对于大小写不敏感。

总的来看 property 的值更偏向于标准而 attribute 的值更偏向于自定义和非标准。

参考文章：
Attribute と Property
属性とプロパティ

[Renato-Z]

property

1. 是DOM中的属性，是JavaScript里的对象

2. 可以读取标签自带属性，包括没有写出来的

3. 不能读取attribute设置的属性
4. 获取方式：读：element.property;            如：p.className;
5. 设置方式：element.property = 'xxx';        如：p.className = 'xiao';
6. 是元素（对象）的属性

attribute

1. 是HTML标签的属性,即直接在html标签添加的都是attribute属性

2. 不能读取property设置的属性

3. 读取方式：element.getAttribute('属性名','属性值');  如：a.getAttribute('href');
4. 设置方式：element.setAttribute('属性名','属性值');  如：a.getAttribute('href','xiaowan.jpg');
5. 直接在html标签上添加的和使用setAttribute添加的情况一致

来和我一起刷3+1吧
gitHub: https://github.com/Renato-Z/exercises/blob/master/history.md

[blueRoach]

attribute是标签的特性

• 跟直接在标签上是用如href、class、src等属性是一样的效果
• 通过setAttribute（设置）getAttribute（获取）来获取和设置值，element.setAttribute('href', 'xxx.html')
• 当attribute值在标签里改变时(不是用setAttribute时)，getAttribute还是原来的值

property是DOM元素的属性

• 元素的属性，包括一些没有写出来的
• 直接通过属性名获取，element.id

[Morpwin]

• attribute是html中标签的特性
• property是js中的对象

取值与赋值

• attribute赋值只能是字符串
• attribute需要用getAttribute和setAttribute方法进行取值赋值
• property可以赋任何值
• property用“.”属性就可以取值和赋值
• 用property进行赋值后，用getAttribute的方式取到的是旧值

如

<input type="text" value="123"/>

用input.value = 456赋值之后，用input.getAttribute("value")获取到的仍然是123

但是用setAttribute赋值后，用property可以取到正确的值

[MrZ2019]

property是DOM中的属性，是JavaScript里的对象
attribute是HTML标签上的特性，它的值只能够是字符串