DOM property 和HTML attribute 的区别详解

引言

今天阅读了vue 的动态组件，其中有这么一句话：

请留意，这个 attribute 可以用于常规 HTML 元素，但这些元素将被视为组件，这意味着所有的 attribute 都会作为 DOM attribute 被绑定。对于像 value 这样的 property，若想让其如预期般工作，你需要使用 .prop 修饰器。

然后我又去看了下.prop 修饰符的定义：作为一个 DOM property 绑定而不是作为 attribute 绑定。(差别在哪里？)

然后我又去点了这个“差别在哪里”，去到了stackflow，一堆英文我不太想看，于是就搜了下百度，发现下面这篇文章，摘抄如下

明确概念

首先因为两个单词在中文中都翻译成属性，所以会造成较多混淆。在此也先明确一下其它一些基础概念。
身为前端人员我们经常会用标签，元素，DOM来形容HTML 内容，对此其实有明确划分的。如下HTML code（能明确区分的可以跳过）

<div id="" class=""></div>

标签指的是 div，也有其他标签如：a，p，input等等。
多数标签分为<div> 开始标签(opening tag)，以及</div>结束标签(closing tag)。
当然有的也不区分如: <input>，<hr>，<br>等。
标签上有附加信息我们称之为 HTML 属性，如 id，class
以上合起来，我们统称为HTML 元素，而一个HTML文档就是多个HTML元素构成的。

而HTML DOM是 HTML 的标准对象模型，DOM(Document Object Model)，直译就是文档对象模型
HTML DOM 定义了所有 HTML 元素的对象和属性，以及访问它们的方法。
而DOM对象上的属性我们称之为property。

讨论原因

引发此次讨论的主要原因就是因为jQuery v1.6.1的发布，此版本之前直接用attr()方法处理了property和attribute，为了消除property和attribute的歧义，以及一些attr()的bug和维护困难的问题，于是新添加了prop()方法，jQuery v1.6.1发布日志可以在这里看。

详细解释

编写HTML源代码时，可以在HTML元素上定义属性(attribute) 。 然后，一旦浏览器解析了您的代码，就会创建一个对应的DOM节点。 该节点是一个对象，因此具有属性 (property)。
例如：

<input type="text" value="name">

input元素有两个属性(attribute)，type和value。
浏览器解析这段代码后，将创建一个HTMLInputElement对象，该对象将包含许多属性。
例如：accept，accessKey，align，alt，attributes，autofocus，baseURI，checked，childElementCount，childNodes，childNodes，classList，className，clientHeight等

解析创建后的这个DOM节点对象，property是这个对象的属性，而attribute是这个对象的attributes这个对象的属性
（简单讲就是这样 domObj.attibutes.attribute ）。

因为是根据HTML 元素创建的DOM节点对象，所以会有许多属性(property)都与具有相同或相似名称的属性(attribute)相关，但这不并是一对一的关系。
比如：

<input id="inputId" type="text" value="name">

此元素创建的DOM节点对象有，id，type，value 等属性(property)
DOM节点对象上的id 属性(property)是映射的id属性(attribute)。获取id的property就是获取attribute值，设置也是一样。

var inputDom = document.querySelector('#inputId')
console.log(inputDom.getAttribute('id'))
console.log(inputDom.id)
// "inputId"
// "inputId"

inputDom.setAttribute('id','inputId2')
console.log(inputDom.getAttribute('id'))
console.log(inputDom.id)
// "inputId2"
// "inputId2"

inputDom.id = 'inputId'
console.log(inputDom.getAttribute('id'))
console.log(inputDom.id)
// "inputId"
// "inputId"
1234567891011121314151617

DOM节点对象上的type属性(property)是映射 type的属性(attribute)，获取property读取的是attribute值，并且设置property写入的是attribute值。type不是纯粹的映射属性，因为它的值只能为 已知值 （例如:text，submit，button，checkbox等等）。以下可以看到，设置type为未知值 时 property始终为text。

var inputDom = document.querySelector('#inputId')
console.log(inputDom.getAttribute('type'))
console.log(inputDom.type)
// text
// text

inputDom.setAttribute('type','007')
console.log(inputDom.getAttribute('type'))
console.log(inputDom.type)
// 007
// text

inputDom.type = '008'
console.log(inputDom.getAttribute('type'))
console.log(inputDom.type)
// 008
// text
1234567891011121314151617

value属性(property)不是完全映射value属性(attribute)。 初始状态value属性(property)映射的value属性(attribute)， 当用户手动更改输入框的内容时 ， value属性(property)将更改为用户输入的信息。

<input id="inputId" type="text" value="name">
1
var inputDom = document.querySelector('#inputId')
console.log(inputDom.getAttribute('value'))
console.log(inputDom.value)
// name
// name

inputDom.setAttribute('value','007')
console.log(inputDom.getAttribute('value'))
console.log(inputDom.value)
// 007
// 007

inputDom.value = '008'
console.log(inputDom.getAttribute('value'))
console.log(inputDom.value)
// 007
// 008
1234567891011121314151617

由以上可以得知，input的value属性(property)在用户未输入数据，或设置property的值时，取的值是attribute的值。当用户输入值或者设置了property的值后，property的值就不受attribute影响了，property的值就是页面输入框内展示的内容（如下图）

attribute的值是HTML源代码属性（如下图）

从这个例子中就能很明显看出来property和attribute的区别了，当然还有很多属性property与attribute之间的映射关系并不相同，比如class attribute 和 className property、classList property 之间的关系等等。

这里有篇 Angular 的文档，其中也描述了html属性和DOM属性的一些内容，有兴趣的小伙伴们可以进去看看。
Web API 接口参考

总结

最后总的来讲就是 HTML属性 (attribute)和 DOM属性(property)，是相互关联的。多数情况attribute值仅用作初始DOM节点对象使用，而property更多用于页面交互，很多框架都是在与元素和指令的 property和事件打交道。