在jquery 1.6.1中进行了更改之后，我一直试图定义HTML中属性和属性之间的区别。

查看jquery 1.6.1发行说明(靠近底部)上的列表，您似乎可以将HTML属性和属性分类如下：

• 属性：所有具有布尔值或是UA计算值(如selectedIndex)的属性。

• attributes:'属性'，可以添加到既不是布尔值也不包含UA生成值的HTML元素中。

思想？

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

例如，这个HTML元素：

有2个属性(type和value)。

一旦浏览器解析了这段代码，就会创建一个htmlinputement对象，该对象将包含许多属性，如：accept、accesskey、align、alt、attributes、autofocus、baseuri、checked、childelementcount、childnodes、children、classlist、classname、clientheight等。

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

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

相应的dom节点将具有id、type和value属性(以及其他属性)：

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

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

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

  1	theInput.value // returns"John"

  鉴于：

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

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

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

  1 2 3

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

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

答案已经解释了属性和属性是如何被不同地处理的，但是我真的想指出这是多么的疯狂。即使在某种程度上符合规范。

有些属性(如id、class、foo、bar)只在dom中保留一种值，而有些属性(如checked、selected)保留两个值，即"加载时"的值和"动态状态"的值，这是疯狂的。(难道dom不应该完全代表文档的状态吗？)

两个输入字段(如文本和复选框)的行为完全相同，这是绝对必要的。如果文本输入字段没有保留单独的"加载时"值和"当前动态"值，为什么要保留该复选框？如果复选框的选中属性有两个值，为什么它的类和ID属性没有两个值？如果您希望更改文本*输入*字段的值，并且希望DOM(即"序列化表示")更改并反映此更改，那么您究竟为什么不希望选中属性上类型为复选框的输入字段发生相同的更改？

"它是一个布尔属性"的区别对我来说没有任何意义，或者至少不是一个充分的理由。

W3C指定了什么是属性什么是属性http://www.w3.org/tr/svgtiny12/attributeTable.html

但目前的属性和属性并没有太大的不同，几乎是一样的。

但有些东西他们更喜欢道具

Summary of Preferred Usage

The .prop() method should be used for boolean attributes/properties and for properties which do not exist in html (such as window.location). All other attributes (ones you can see in the html) can and should continue to be manipulated with the .attr() method.

好吧，事实上，如果你使用属性或属性或者两者都使用，你不需要改变什么，两者都可以工作。但我在自己的应用程序中看到，这个道具在ATR没有的地方起作用，所以我就使用了我的1.6应用程序prop=)

在阅读了西蒙·维达斯的答案之后，我进一步搜索，发现在角度文档中有一个非常直截了当且易于理解的解释。

HTML attribute vs. DOM property

Attributes are defined by HTML. Properties are defined by the DOM
(Document Object Model).

• A few HTML attributes have 1:1 mapping to properties. id is one
  example.

• Some HTML attributes don't have corresponding properties. colspan is
  one example.

• Some DOM properties don't have corresponding attributes. textContent
  is one example.

• Many HTML attributes appear to map to properties ... but not in the
  way you might think!

That last category is confusing until you grasp this general rule:

Attributes initialize DOM properties and then they are done. Property
values can change; attribute values can't.

For example, when the browser renders ,
it creates a corresponding DOM node with a value property initialized
to"Bob".

When the user enters"Sally" into the input box, the DOM element value
property becomes"Sally". But the HTML value attribute remains
unchanged as you discover if you ask the input element about that
attribute: input.getAttribute('value') returns"Bob".

The HTML attribute value specifies the initial value; the DOM value
property is the current value.

The disabled attribute is another peculiar example. A button's
disabled property is false by default so the button is enabled. When
you add the disabled attribute, its presence alone initializes the
button's disabled property to true so the button is disabled.

Adding and removing the disabled attribute disables and enables the
button. The value of the attribute is irrelevant, which is why you
cannot enable a button by writing Still
Disabled.

Setting the button's disabled property disables or enables the button. The value of the property matters.

The HTML attribute and the DOM property are not the same thing, even
when they have the same name.

在评估HTML中的区别之前，让我们先看看这些词的定义：

英语定义：

• 属性是指对象的附加信息。
• 属性描述对象的特征。

在HTML上下文中：

当浏览器解析HTML时，它会创建一个树形数据结构，它基本上是HTML的内存表示形式。它的树形数据结构包含的节点是HTML元素和文本。与此相关的属性和属性如下：

• 属性是附加信息，我们可以将其放入HTML中初始化某些DOM属性。
• 属性是在浏览器解析HTML并生成DOM时形成的。DOM中的每个元素都有自己的一组属性，这些属性都由浏览器设置。其中一些属性的初始值可以由HTML属性设置。每当DOM属性发生变化并对呈现的页面产生影响时，将立即重新呈现该页面。

认识到这些属性的映射不是1到1也是很重要的。换句话说，不是我们在HTML元素上给出的每个属性都具有类似的命名DOM属性。

而且具有不同的DOM元素和不同的属性。例如，一个元素有一个值属性，它不存在于属性中。

让我们看下面的HTML文档：

然后在JS控制台中检查：

我们可以看到以下DOM属性(chrome devtools，而不是所有显示的属性)：

• 我们可以看到，HTML中的属性id现在也是DOM中的ID属性。该ID已由HTML初始化(尽管我们可以用JavaScript更改它)。
• 我们可以看到HTML中的class属性没有对应的class属性(class是JS中的保留关键字)。但实际上有两个属性，classList和className。