在 jQuery 1.6.1 中进行了更改之后，我一直在尝试定义 HTML 中属性和属性之间的区别。
查看jQuery 1.6.1 release notes（靠近底部）上的列表，似乎可以将 HTML 属性和属性分类如下：
属性：所有具有布尔值或 UA 计算的属性，例如 selectedIndex。
属性：可以添加到既不是布尔值也不包含 UA 生成值的 HTML 元素的“属性”。
想法？
【问题讨论】：
标签： javascript html dom properties
更新我的答案这是来自https://angular.io/guide/binding-syntax的引用
HTML 属性和 DOM 属性
属性初始化 DOM 属性，您可以配置它们来修改元素的行为，但属性是 DOM 节点的特性。
一些 HTML 属性与属性有 1:1 的映射关系；例如，身份证。
一些 HTML 属性没有对应的属性；例如，咏叹调-*。
一些 DOM 属性没有对应的属性；例如，文本内容。
请记住，HTML 属性和 DOM 属性是不同的东西，即使它们具有相同的名称。
示例 1： 当浏览器渲染时，它会创建一个对应的带有 value 属性的 DOM 节点，并将该值初始化为“Sarah”。
<input type="text" value="Sarah">
当用户在 中输入 Sally 时，DOM 元素的 value 属性变为 Sally。但是，如果您使用 input.getAttribute('value') 查看 HTML 属性值，您会发现该属性保持不变——它返回“Sarah”。
HTML属性值指定初始值； DOM value 属性是当前值。
示例 2： 禁用按钮 按钮的 disabled 属性默认为 false，因此该按钮处于启用状态。
当您添加 disabled 属性时，您正在将按钮的 disabled 属性初始化为 true，从而禁用按钮。
<button disabled>Test Button</button>
添加和删除 disabled 属性会禁用和启用按钮。但是，属性的值是无关紧要的，这就是为什么您不能通过编写 Still Disabled 来启用按钮的原因。
要控制按钮的状态，请设置 disabled 属性。
属性和属性比较 虽然您可以在技术上设置 [attr.disabled] 属性绑定，但值的不同之处在于属性绑定必须是布尔值，而其对应的属性绑定取决于该值是否为空。考虑以下几点：
<input [disabled]="condition ? true : false">
<input [attr.disabled]="condition ? 'disabled' : null">
使用 disabled 属性的第一行使用布尔值。第二行，它使用 disabled 属性检查 null。
通常，使用属性绑定而不是属性绑定，因为布尔值易于阅读，语法更短，属性更高效。
【讨论】：
看了Sime Vidas的回答后，又搜索了一番，在angular docs找到了一个非常直白易懂的解释。
HTML 属性与 DOM 属性
-------------------------------------------
属性由 HTML 定义。属性由 DOM 定义 （文档对象模型）。
一些 HTML 属性与属性具有 1:1 的映射关系。
id是一个 例子。某些 HTML 属性没有相应的属性。
colspan是 一个例子。一些 DOM 属性没有对应的属性。
textContent就是一个例子。许多 HTML 属性似乎映射到属性……但不是在 你可能想的那样！
在您掌握这条一般规则之前，最后一个类别令人困惑：
属性初始化 DOM 属性，然后它们就完成了。财产 价值观可以改变；属性值不能。
比如浏览器渲染
<input type="text" value="Bob">时， 它创建一个对应的 DOM 节点，并初始化了value属性 给“鲍勃”。当用户在输入框中输入“Sally”时，DOM元素
valueproperty 变为“Sally”。但是 HTMLvalueattribute 仍然存在 如果您询问输入元素，您会发现没有改变 属性：input.getAttribute('value')返回“Bob”。HTML 属性
value指定initial 值； DOMvalue属性是当前值。
disabled属性是另一个特殊的例子。一个按钮disabled属性默认为false，因此该按钮已启用。什么时候 您添加disabled属性，它的存在单独初始化 按钮的disabled属性为true，因此该按钮被禁用。添加和删除
disabled属性会禁用和启用 按钮。属性的值是无关紧要的，这就是为什么你 不能通过写<button disabled="false">Still Disabled</button>.来启用按钮设置按钮的
disabled属性 禁用或启用按钮。 属性的价值很重要。HTML属性和DOM属性不是一回事，甚至 当他们有相同的名字时。
【讨论】：
colspan 属性具有colSpan 属性。 ... 那么，现在哪个属性没有相关属性？
在评估 HTML 中的区别之前，让我们先看看这些词的定义：
英文定义：
在 HTML 上下文中：
当浏览器解析 HTML 时，它会创建一个树形数据结构，它基本上是 HTML 的内存表示。它的树数据结构包含 HTML 元素和文本的节点。与此相关的属性和属性的方式如下：
同样重要的是要认识到这些属性的映射不是一对一的。换句话说，并不是我们在 HTML 元素上给出的每个属性都会有一个类似的命名 DOM 属性。
此外，不同的DOM元素有不同的属性。例如，<input> 元素具有 <div> 属性中不存在的 value 属性。
我们来看下面的 HTML 文档：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> <!-- charset is a attribute -->
<meta name="viewport" content="width=device-width"> <!-- name and content are attributes -->
<title>JS Bin</title>
</head>
<body>
<div id="foo" class="bar foobar">hi</div> <!-- id and class are attributes -->
</body>
</html>
然后我们在 JS 控制台中检查<div>：
console.dir(document.getElementById('foo'));
我们看到以下 DOM 属性（chrome devtools，未显示所有属性）：
class是JS中的保留关键字）。但实际上有 2 个属性，classList 和 className。【讨论】：
在编写 HTML 源代码时，您可以在 HTML 元素上定义 属性。然后，一旦浏览器解析了你的代码，就会创建一个对应的 DOM 节点。该节点是一个对象，因此它具有属性。
例如，这个 HTML 元素：
<input type="text" value="Name:">
有 2 个属性（type 和 value）。
一旦浏览器解析这段代码，就会创建一个HTMLInputElement对象，这个对象将包含几十个属性，如：accept、accessKey、align、alt、attributes、autofocus、baseURI、checked、childElementCount、childNodes、children 、classList、className、clientHeight等
对于给定的 DOM 节点对象，属性是该对象的属性，属性是该对象的 attributes 属性的元素。
当为给定的 HTML 元素创建 DOM 节点时，它的许多属性都与具有相同或相似名称的属性相关，但这不是一对一的关系。例如，对于这个 HTML 元素：
<input id="the-input" type="text" value="Name:">
相应的 DOM 节点将具有 id、type 和 value 属性（以及其他属性）：
id 属性是id 属性的反射属性：获取属性读取属性值，设置属性写入属性值。 id 是一个纯反射属性，它不会修改或限制值。
type 属性是type 属性的反射属性：获取属性读取属性值，设置属性写入属性值。 type 不是纯反射属性，因为它仅限于已知值（例如，输入的有效类型）。如果你有<input type="foo">，那么theInput.getAttribute("type") 给你"foo" 但theInput.type 给你"text"。
相比之下，value 属性不反映value 属性。相反，它是输入的当前值。当用户手动更改输入框的值时，value 属性将反映此更改。所以如果用户在输入框中输入"John"，那么：
theInput.value // returns "John"
而：
theInput.getAttribute('value') // returns "Name:"
value 属性反映输入框内的当前文本内容，而value 属性包含value 的初始文本内容来自 HTML 源代码的属性。
因此，如果您想知道当前文本框内的内容，请阅读该属性。但是，如果您想知道文本框的初始值是什么，请阅读属性。或者您可以使用defaultValue 属性，它是value 属性的纯反射：
theInput.value // returns "John"
theInput.getAttribute('value') // returns "Name:"
theInput.defaultValue // returns "Name:"
有几个属性直接反映了它们的属性（rel、id），有些是名称略有不同的直接反映（htmlFor 反映了for 属性，className 反映了class属性），许多反映其属性但有限制/修改（src、href、disabled、multiple）等等。 The spec 涵盖了各种反射。
【讨论】：
for -> htmlFor）以及类似的从属性中获取初始值但不反映它的属性列表(input.value)。我希望这会在像 github.com/Matt-Esch/virtual-dom 这样的库的源代码中的某个地方，但它并没有真正记录在案。
这些是由 w3c 指定的，什么是属性，什么是属性 http://www.w3.org/TR/SVGTiny12/attributeTable.html
但目前 attr 和 prop 差别不大，几乎相同
但他们更喜欢道具来做一些事情
首选用法摘要
.prop() 方法应该用于布尔属性/属性以及 html 中不存在的属性（例如 window.location）。所有其他属性（您可以在 html 中看到的属性）可以并且应该继续使用 .attr() 方法进行操作。
实际上，如果您使用 attr 或 prop 或两者都使用，则不必更改某些内容，两者都可以 但我在我自己的应用程序中看到 prop 在 atrr 没有工作的地方工作，所以我采用了我的 1.6 应用程序 prop =)
【讨论】：
答案已经解释了如何以不同的方式处理属性和属性，但我真的想指出这是多么疯狂。即使在某种程度上是规范。
太疯狂了，让某些属性（例如id, class, foo, bar）在DOM中只保留一种值，而某些属性（例如checked , 选中) 保留两个值；即“加载时”的值和“动态状态”的值。 （难道 DOM 不应该充分代表 document 的状态吗？）
两个输入字段是绝对必要的，例如文本和复选框 行为方式完全相同。如果文本输入字段不保留单独的“加载时”值和“当前，动态”值，为什么要勾选复选框？如果复选框的 checked 属性有两个值，为什么它的 class 和 id 属性没有两个值？ 如果您希望更改 text *input* 字段的值，并且您希望 DOM（即“序列化表示”）发生更改并反映这种更改，那么您到底为什么不期望与选中属性上 checkbox 类型的 input 字段相同？
“它是一个布尔属性”的区分对我来说没有任何意义，或者至少不是这样做的充分理由。
【讨论】：
checked 属性由defaultChecked 属性表示（同样对于文本输入，value 属性由defaultValue 属性表示）。第二个属性checked 表示是否选中了复选框，因为这是复选框功能的固有部分：它是交互式的并且可以更改（如果存在表单重置按钮，则重置为默认值）由用户以其他属性（例如id）不存在的方式。这与它是一个布尔属性这一事实无关。
forms有一个reset方法，而reset方法需要从HTML属性中读取原始数据。