前端杂谈: Attribute VS Property-优快云博客

本文深入解析了HTML中的attribute与DOM节点的property之间的区别与联系，通过实例对比了两者在处理时的不同表现，揭示了在页面加载及用户交互过程中，它们各自的作用与特性。

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

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

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

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

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

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

让我们来看另一段代码:

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

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

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

转载于:https://my.oschina.net/u/3611008/blog/2876080