【Angular4】 HTML属性与DOM属性对比（1）

HTML属性和DOM属性的关系

1. 少量HTML 属性和DOM 属性之间有着1:1的映射，如id.
   eg:有些HTML 属性没有对应的DOM 属性,如colspan.
   有些DOM 属性没有对应的HTML 属性,如textContent.
2. HTML 属性的值指定了初始值; DOM 属性的值表示当前值。
3. DOM 属性的值可以改变; HTML 属性的值不能改变。
4. 模板绑定是通过DOM属性和事件来工作的，而不是HTML 属性。

DEMO

（1）模板显示：

<input value="初始的html属性值" (input)="doOnInput($event)">

（2）控制器事件：

  doOnInput(event:any){
  //在控制台输出dom属性
    console.log(event.target.value);
   //输出HTML属性
    console.log(event.target.getAttribute('value'));
  } 

分析

当浏览器渲染这个字符串时，会创建一个相应的dom节点，dom是一个类型为HTML Element的对象，
每个dom都有自己的属性和方法，以这个input为例，这个dom节点的值将被初始化为“初始的HTML属性值”，始终不变。
但该dom属性值为当前值，文本框中的值一旦变化，dom值就随之改变。

效果