【译】详解HTML中property和attribute的区别

翻看Vue API文档时发现v-bind有一个修饰符.prop比较特殊:

.prop - 作为一个 DOM property 绑定而不是作为 attribute 绑定。

文档还给了一个stack overflow上的问题差别在哪里？来解释，感觉高票答案通俗易懂，遂翻译一波。

译文

当编写一段HTML代码的时候，你可以在HTML标签上面定义attribute，当浏览器编译完HTML代码，会生成与之对应的一个个DOM节点，每个DOM节点是一个对象，所以它拥有很多property。例如以下代码：

<input type="text" value="Name:">

input标签有两个attribute，即type和value。当浏览器编译完这段代码，一个HTMLInputElement对象会被创建，这个对象包含一系列的property，例如accept, accessKey, align, alt, attributes, autofocus, baseURI, checked, childElementCount, childNodes, children, classList, className, clientHeight等。

对于一个DOM节点对象，property就是这个对象上的属性；attribute是该对象对应的HTML标签元素上的属性。

当一个HTML标签元素解析成一个DOM节点对象时，这个节点对象上有很多property属性名和HTML标签元素上的attribute相同或相似，但不一定是一一映射关系。比如：

<input id="the-input" type="text" value="Name:">

对于上述HTML标签，其对应的DOM节点对象的property包括id、type、value（当然还有别的）：

1. id
   DOM节点对象上的id属性(property)和HTML标签上的id属性(attribute)是映射关系。当读取DOM节点对象的id属性值时就是读取HTML标签上的id属性值，当给DOM节点对象的id属性写入值时就是往HTML标签上的id属性写入值。id是一个纯映射属性，映射过程中不会产生副作用，比如修改或者限制其值。

2. type
   和id属性一样，DOM节点对象上的type属性(property)和HTML标签上的type属性(attribute)是映射关系。当读取DOM节点对象的id属性值时就是读取HTML标签上的id属性值，当给DOM节点对象的id属性写入值时就是往HTML标签上的id属性写入值。但是，type属性不是一个纯映射属性，因为在映射过程中，它的值会被限制在已知类型中，比如input支持的有效type类型。举个例子，对于<input type="foo">这样一个HTML标签, Input.getAttribute('type')的返回值是foo，而Input.type的返回值为text

3. value
   与上面两个属性相反，DOM节点对象上的value属性(property)和HTML标签上的value属性(attribute)不存在映射关系，它就是当前input输入框的值。当用户改变输入框中的值，DOM对象上的value属性会跟着变化。假如用户在输入框中输入'John'，那么Input.value的返回值是John，而Input.getAttribute('value')的返回值是Name:。

从上面可以看出，DOM节点对象上的value属性(property)是当前输入框内容的映射，而HTML标签上的value属性(attribute)是HTML标签元素上初始设置的值（或者代码设置）。

如果你需要知道当前输入框的内容，就直接读取DOM节点对象的value属性(property)；如果你想知道输入框的初始值是什么，就直接读取HTML标签元素的value属性(attribute)，或者使用DOM节点对象的defaultValue属性，它与HTML标签上的value属性(attribute)是纯映射关系：

Input.value                 // returns "John"
Input.getAttribute('value') // returns "Name:"
Input.defaultValue          // returns "Name:"

有些DOM节点对象上的property属性与HTML标签上的attribute属性一一映射（名字一样），比如rel、id；有些名字稍微有些变化，比如DOM节点对象htmlFor属性对应HTML标签上的for属性，DOM节点对象className属性对应HTML标签上的class属性；更多的是两者虽然有映射关系，但是存在副作用，会限制或者修改属性值，比如src、href、disabled、multiple等。

原文

What is the difference between properties and attributes in HTML