前端杂谈: Attribute VS Property

时间 2019-11-06

标签前端杂谈 attribute property 繁體版

原文原文链接

第一个问题: 什么是 attribute & 什么是 property ?

attribute 是咱们在 html 代码中常常看到的键值对, 例如:javascript

<input id="the-input" type="text" value="Name:" />

上面代码中的 input 节点有三个 attribute:html

id : the-input
type : text
value : Name:

property 是 attribute 对应的 DOM 节点的对象属性 (Object field), 例如:html5

HTMLInputElement.id === 'the-input'
HTMLInputElement.type === 'text'
HTMLInputElement.value === 'Name:'

第二个问题:

从上面的例子来看, 彷佛 attribute 和 property 是相同的, 那么他们有什么区别呢?java

让咱们来看另外一段代码:git

<input id="the-input" type="typo" value="Name:" /> // 在页面加载后,
咱们在这个input中输入 "Jack"

注意这段代码中的 type 属性, 咱们给的值是 typo, 这并不属于 input 支持的 type 种类.github

让咱们来看看上面这个 input 节点的 attribute 和 property:微信

// attribute still remains the original value
input.getAttribute('id') // the-input
input.getAttribute('type') // typo
input.getAttribute('value') // Name:

// property is a different story
input.id // the-input
input.type //  text
input.value // Jack

能够看到, 在 attribute 中, 值仍然是 html 代码中的值. 而在 property 中, type 被自动修正为了 text, 而 value 随着用户改变 input 的输入, 也变动为了 Jackpost

这就是 attribute 和 Property 间的区别:code

attribute 会始终保持 html 代码中的初始值, 而 Property 是有可能变化的.htm

其实, 咱们从这两个单词的名称也能看出些端倪:

attribute 从语义上, 更倾向于不可变动的

而 property 从语义上更倾向于在其生命周期中是可变的

Attribute or Property 能够自定义吗?

先说结论: attribute 能够 property 不行

咱们能够尝试在 html 中自定义 attribute:

<input value="customInput" customeAttr="custome attribute value" />

而后咱们尝试获取自定义的属性:

input.getAttribute('customAttr') // custome attribute value
input.customAttr // undefined

能够看到, 咱们可以成功的获取自定义的 attribute, 可是没法获取 property.

其实不难理解, DOM 节点在初始化的时候会将html 规范中定义的 attribute 赋值到 property 上, 而自定义的 attribute 并不属于这个氛围内, 天然生成的 DOM 节点就没有这个 property.

一些补充

须要注意, 有一些特殊的 attribute, 它们对应的 Property 名称会发生改变, 好比:

for (attr) => htmlFor (prop)
class (attr) => className (prop)

(若是咱们追到 DOM 的源码中, 应该是能列出一份清单的: 哪些 attribute 的名称会对应到哪些 Property, 感兴趣不妨试试)

关于 attribute 和 property 二者之间的差异, stackoverflow 上有一些颇有意思的讨论:

https://stackoverflow.com/a/6377829/5033286

其中有些人认为 attribute 的值表示的是 defaultValue, 而 DOM 节点的 Property 则是另外一回事. 好比: check (attr) 对应的是 defaultChecked (prop), value(attr) 对应的应该是 defaultValue (prop)

关于咱们在 attribute 中 value 的限制 (如 input 的 type 有那些有效值), 能够参考这个连接:

https://www.w3.org/TR/html5/infrastructure.html#reflect