编写 HTML 源代码时，可以在 HTML 元素上定义属性。然后，一旦浏览器解析您的代码，将创建一个相应的DOM节点。此节点是一个对象，因此它具有属性。

例如，这个 HTML 元素：

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

有 2 个属性 （ 和 ）。typevalue

一旦浏览器解析此代码，将创建一个HTMLInputElement对象，并且该对象将包含数十个属性，例如：accept，accessKey，align，alt，属性，autofocus，baseURI，checked，childElementCount，childNodes，children，classList，className，clientHeight等。

对于给定的 DOM 节点对象，属性是该对象的属性，而属性是该对象的属性的元素。attributes

为给定的 HTML 元素创建 DOM 节点时，其许多属性都与具有相同或相似名称的属性相关，但这不是一对一的关系。例如，对于此 HTML 元素：

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

相应的 DOM 节点将具有 、和属性（其中包括）：idtypevalue

• 属性是属性的反射属性：获取属性读取属性值，设置属性写入属性值。 是纯反射属性，它不会修改或限制值。ididid

• 属性是属性的反射属性：获取属性读取属性值，设置属性写入属性值。 不是纯反射属性，因为它仅限于已知值（例如，输入的有效类型）。如果你有，那么给你，但给你。typetypetype<input type="foo">theInput.getAttribute("type")"foo"theInput.type"text"

• 相反，该属性不反映该属性。相反，它是输入的当前值。当用户手动更改输入框的值时，该属性将反映此更改。因此，如果用户输入到输入框中，则：valuevaluevalue"John"

  theInput.value // returns "John"
  

  而：

  theInput.getAttribute('value') // returns "Name:"
  

  该属性反映输入框中的当前文本内容，而该属性包含 HTML 源代码中属性的初始文本内容。valuevaluevalue

  因此，如果您想知道文本框中当前的内容，请阅读该属性。但是，如果您想知道文本框的初始值是什么，请阅读该属性。或者，您可以使用该属性，它是该属性的纯粹反映：defaultValuevalue

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

有几个属性直接反映它们的属性（， ），有些是名称略有不同的直接反射（反映属性，反映属性），许多反映它们的属性，但有限制/修改（，，，）等。该规范涵盖了各种反射。relidhtmlForforclassNameclasssrchrefdisabledmultiple

在阅读了Sime Vidas的答案后，我搜索了更多，并在棱角分明的文档中找到了一个非常直接且易于理解的解释。

HTML 属性与 DOM 属性

-------------------------------

属性由 HTML 定义。属性由 DOM（文档对象模型）定义。

• 一些 HTML 属性具有到属性的 1：1 映射。 就是一个例子。id

• 某些 HTML 属性没有相应的属性。 就是一个例子。colspan

• 某些 DOM 属性没有相应的属性。 就是一个例子。textContent

• 许多HTML属性似乎映射到属性...但不是你想象的那样！

最后一类令人困惑，直到你掌握了这个一般规则：

属性初始化 DOM 属性，然后完成。属性值可以更改;属性值不能。

例如，当浏览器呈现时，它会创建一个相应的 DOM 节点，其属性初始化为“Bob”。<input type="text" value="Bob">value

当用户在输入框中输入“Sally”时，DOM 元素属性将变为“Sally”。但是，当您向输入元素询问有关该属性的问题时，HTML 属性保持不变：返回“Bob”。valuevalueinput.getAttribute('value')

HTML 属性指定初始值;DOM 属性是当前值。valuevalue

该属性是另一个特殊示例。默认情况下，按钮的属性是启用的。添加该特性时，仅其存在就会初始化按钮的属性，以便禁用该按钮。disableddisabledfalsedisableddisabledtrue

添加和删除属性将禁用并启用该按钮。属性的值无关紧要，这就是为什么您无法通过编写disabled<button disabled="false">Still Disabled</button>.

设置按钮的属性将禁用或启用该按钮。财产的价值很重要。disabled

HTML 属性和 DOM 属性不是一回事，即使它们具有相同的名称。