编写 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、客户端高度等

对于给定的 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"在输入框中输入，那么：

sql theInput.value // returns "John"

然而：

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

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

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

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

有几个属性直接反映其属性 ( rel, id)，有些是名称略有不同的直接反映 (htmlFor反映for属性，className反映class属性)，许多反映其属性但带有限制/修改 ( src, href, disabled, multiple)，等等在。该规范涵盖了各种反射。