HTML的attribute和DOM的property剖析（转）

Posted 2021-12-17 ajianbeyourself

原文：https://www.jianshu.com/p/efc704d713c7

html attribute 与 DOM property 的对比

该文摘自angular的官方文档，老外对概念的解释还是很到位和容易理解的

attribute 是由 HTML 定义的。property 是由 DOM (Document Object Model) 定义的。

• 少量 HTML attribute 和 property 之间有着 1:1 的映射，如id。
• 有些 HTML attribute 没有对应的 property，如colspan。
• 有些 DOM property 没有对应的 attribute，如textContent。
• 大量 HTML attribute看起来映射到了property…… 但却不像我们想的那样！
• 最后一类尤其让人困惑…… 除非我们能理解这个普遍原则：

attribute 初始化 DOM property，然后它们的任务就完成了。property 的值可以改变；attribute 的值不能改变。

例如，当浏览器渲染<input type="text" value="Bob">时，它将创建相应 DOM 节点， 其value property 被初始化为 “Bob”。

当用户在输入框中输入 “Sally” 时，DOM 元素的value property 变成了 “Sally”。 但是这个 HTML value attribute 保持不变。如果我们读取 input 元素的 attribute，就会发现确实没变： input.getAttribute(‘value‘) // 返回 "Bob"。

HTML attribute value指定了初始值；DOM value property 是当前值。

disabled attribute 是另一个古怪的例子。按钮的disabled property 是false，因为默认情况下按钮是可用的。 当我们添加disabled attribute 时，只要它出现了，按钮的disabled property 就初始化为true，于是按钮就被禁用了。

添加或删除disabled attribute会禁用或启用这个按钮。而与attribute 的值无关，这就是我们为什么没法通过 <button disabled="false">仍被禁用</button>这种写法来启用按钮。

设置按钮的disabled property（如，通过 Angular 绑定）可以禁用或启用这个按钮。 这就是 property 的价值。

就算名字相同，HTML attribute 和 DOM property 也不是同一样东西。

延伸

对于angular而言，这句话很重要，得再强调一次：

模板绑定是通过 property 和事件来工作的，而不是 attribute。

在 Angular 的世界中，attribute 唯一的作用是用来初始化元素和指令的状态。 当进行数据绑定时，只是在与元素和指令的 property 和事件打交道，而 attribute 就完全靠边站了。

作者：bluuus
链接：https://www.jianshu.com/p/efc704d713c7
来源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。