[js] 第159天 在js中attribute和property的区别是什么？

[haizhilin2013]

第159天 在js中attribute和property的区别是什么？

[vkboo]

• attribute

  • 元素在HTML中的键值对
  • attribute 会始终保持 html 代码中的初始值(除了href)

• property

  • attribute在对应的JS DOM节点上的对象属性
  • Property是有可能变化的(跟随用户操作).

• 其他补充

  • 有一些特殊的 attribute, 它们对应的 Property 名称会发生改变
    • for (attr) => htmlFor (prop)
    • class (attr) => className (prop)
  • 以下图来自@justjavac （https://zhuanlan.zhihu.com/p/70671215）
    

[justjavac]

@vkboo 链接多了一半括号 https://zhuanlan.zhihu.com/p/70671215

[forever-z-133]

@justjavac 的最后一项，
更新 value 时，属性和特性的更新是什么样的呀

[wqcstrong]

@vkboo 链接多了一半括号 https://zhuanlan.zhihu.com/p/70671215

@justjavac 在理解的基础上，用一句话概括：浏览器解析之前全都是特性，解析之后分情况：标准特性的值将被解析并挂载到 DOM属性上，非标准特性只可用DOM的 getAttribute 等方法取值。

这样说应该问题不大吧？

[justjavac]

@foreverZ133 非标准的不做任何映射，只能通过 getAttribute 等函数获取到值，值是字符串类型。

[forever-z-133]

@foreverZ133 非标准的不做任何映射，只能通过 getAttribute 等函数获取到值，值是字符串类型。

噢，一个会改变 html 一个不会，突然冒出来个特性搞蒙了，Thanks

[zhaofeipeter]

1、property和attributies都是properties的子集，而每个attribute是attributies的子集；
2、attribute可以理解为特性，可以自定义，直接在html标签上添加的和使用setAttribute添加的情况一致，即html标签添加的都是attribute属性， property则是使用xx.属性进行更改，通常来讲，更改互相影响（value除外）
3、当添加新的非默认属性时，是不互通的；
4、一些特殊属性，则需要特殊对待。

property能够从attribute中得到同步；
attribute不会同步property上的值；
attribute和property之间的数据绑定是单向的，attribute->property；
更改property和attribute上的任意值，都会将更新反映到HTML页面中；

[bozaigao]

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

[xiaoqiangz]

attribute是特性，一般是用于自定义特性，例：data-xx=“xxx” 可以使用getAttribute('data-xx')获取，且只能是字符串。
property是属性，是dom元素中的属性，例如dom.innerHTML会改变dom本身。