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

例如，此HTML元素：

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

有2个属性（type和value）。

浏览器解析此代码后，将创建一个HTMLInputElement对象，该对象将包含许多属性，例如：accept，accessKey，align，alt，attribute，autofocus，baseURI，checked，childElementCount，childNodes，childNodes，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不是纯反射属性，因为它仅限于 _已知值（例如，输入的有效类型）。如果你有<inputtype="foo">，那么theInput.getAttribute("type")给你"foo"但theInput.type给你"text"。

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

  theInput.value // returns "John"
  

而：

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

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

因此，如果您想知道文本框中当前包含的内容，请阅读属性。但是，如果您想知道文本框的初始值是什么，请阅读属性。或者，您可以使用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）等上。