HTML attribute 与 DOM property

本章来源于https://angular.cn/guide/template-syntax

要想理解 Angular 绑定如何工作,重点需先搞清 HTML attribute 和 DOM property 之间的区别。

attribute是由HTML定义的,而property是由DOM定义的。

    ●  少量 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”。

当在输入框修改输入值时,DOM 元素的 value 这个 property 变成了 “Sally”。 但是该 HTML 的 value 这个 attribute 保持不变。

HTML 的 value 这个 attribute 指定了初始值;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 也不是同一样东西。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容