HTML attribute 和 DOM property 关系与区别

欢迎来到Altaba的博客，20190115

日常开发中使用到angular Renderer2渲染器，Renderer2有setAttribute() 和 setProperty() 两个修改元素属性的方法，官网并未对此做对比。发现setAttribute()方法在某些情况下无法修改radio的checked属性，顾花了一些时间研究了下HTML attribute 和 DOM property。

通过elementRef或者@viewChild @viewChildren获取元素，再通过renderer2提供的API来操作元素。不过记得在不要在 ngAfterViewInit 周期之前使用。

setAttribute() 和 setProperty() 的区别

setProperty()设置元素Property，setAttribute()设置元素Attribute

angular 官网说明：

Template binding works with properties and events, not attributes.
模板绑定是通过 property 和事件来工作的，而不是 attribute。

HTML attribute & DOM property 关系与区别

attribute 是由 HTML 定义的。property 是由 DOM (Document Object Model) 定义的。
少量 HTML attribute 和 property 之间有着 1:1 的映射，如id。
有些 HTML attribute 没有对应的 property，如colspan。
有些 DOM property 没有对应的 attribute，如textContent。

普遍原则：

1、HTML attribute 初始化 DOM property，然后它们的任务就完成了。
2、更改 attribute 的值，相当于再次初始化DOM property 。
3、更改 property 的值，property值改变，attribute值不变。

总的来说，尽量操作DOM property，只有在没有DOM property(自定义attribute或者没有相关映射)，才去操作HTML attribute。