在 jQuery 1.6.1 中进行更改后，我一直试图在 HTML 中定义属性和属性之间的区别。
查看jQuery 1.6.1 发行说明（靠近底部）上的列表，似乎可以将 HTML 属性和属性分类如下：
属性：所有具有布尔值或 UA 计算的属性，例如 selectedIndex。
属性：可以添加到既不是布尔值也不包含 UA 生成值的 HTML 元素的“属性”。
想法？
HTML 中的属性和属性有什么区别？
IT技术
javascript
html
dom
properties
2021-01-11 23:37:18
6个回答
在编写 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"在输入框中输入，那么：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），等等在。该规范涵盖了各种反射。
在阅读了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属性初始化为“Bob”。当用户在输入框中输入“Sally”时，DOM 元素
value属性变为“Sally”。但是，当您向 input 元素询问该属性时，您会发现HTMLvalue属性保持不变：input.getAttribute('value')返回“Bob”。HTML 属性
value指定初始值；DOMvalue属性是当前值。
该
disabled属性是另一个特殊的例子。默认情况下，按钮的disabled属性false是启用的。当您添加disabled属性时，它的存在将按钮的disabled属性初始化为，true因此按钮被禁用。添加和删除
disabled属性禁用和启用按钮。属性的值无关紧要，这就是为什么你不能通过写来启用按钮<button disabled="false">Still Disabled</button>.设置按钮的
disabled属性会禁用或启用按钮。财产的value很重要。HTML 属性和 DOM 属性不是一回事，即使它们具有相同的名称。
答案已经解释了如何以不同的方式处理属性和属性，但我真的想指出这是多么疯狂。即使它在某种程度上是规范。
很疯狂，让一些属性（例如id, class, foo, bar）在 DOM 中只保留一种值，而某些属性（例如checked, selected）保留两种值；即“加载时”的值和“动态”的值。（难道 DOM 不应该代表文档的全部状态吗？）
绝对必要的是，两个输入字段（例如文本和复选框）的 行为方式完全相同。如果文本输入字段没有保留单独的“加载时”值和“当前、动态”值，为什么复选框会保留？如果复选框的checked属性有两个值，为什么它的class和id属性没有两个值？如果您希望更改文本*input* 字段的值，并且您希望 DOM（即“序列化表示”）发生更改并反映此更改，那么您到底为什么不期望输入字段的值相同输入复选框 在checked属性上？
“它是一个布尔属性”的区别对我来说没有任何意义，或者至少不是充分的理由。
好吧，这些是由 w3c 指定的，什么是属性，什么是属性 http://www.w3.org/TR/SVGTiny12/attributeTable.html
但目前 attr 和 prop 并没有那么不同，几乎相同
但他们更喜欢某些事情的props
首选用法摘要
.prop() 方法应该用于布尔属性/属性和 html 中不存在的属性（例如 window.location）。所有其他属性（您可以在 html 中看到的属性）可以并且应该继续使用 .attr() 方法进行操作。
好吧，实际上，如果您使用 attr 或 prop 或两者都使用，则不必更改某些内容，两者都有效，但我在自己的应用程序中看到 prop 在 atrr 没有的情况下有效，因此我采用了我的 1.6 app prop =)
区别 HTML 属性和属性：
在评估 HTML 中的区别之前，让我们先看看这些词的定义：
英文定义：
- 属性是指对象的附加信息。
- 属性是描述对象的特征。
在 HTML 上下文中：
当浏览器解析 HTML 时，它会创建一个树数据结构，它基本上是 HTML 的内存表示。它的树数据结构包含节点，这些节点是 HTML 元素和文本。与此相关的属性和属性是以下方式：
- 属性是附加信息，我们可以将其放入 HTML 以 初始化某些 DOM 属性。
- 属性是在浏览器解析 HTML 并生成 DOM 时形成的。DOM 中的每个元素都有自己的一组属性，这些属性都由浏览器设置。其中一些属性的初始值可以由 HTML 属性设置。每当影响渲染页面的 DOM 属性发生变化时，页面将立即重新渲染
认识到这些属性的映射不是 1 到 1 的也很重要。换句话说，并非我们在 HTML 元素上提供的每个属性都具有类似的命名 DOM 属性。
此外具有不同的 DOM 元素不同的属性。例如，一个<input>元素具有一个属性上不存在的 value<div>属性。
例子：
让我们以下面的 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>
然后我们<div>在 JS 控制台中检查, ：
console.dir(document.getElementById('foo'));
我们看到以下 DOM 属性（chrome devtools，未显示所有属性）：
- 我们可以看到 HTML 中的 id 属性现在也是 DOM 中的 id 属性。id 已由 HTML 初始化（尽管我们可以使用 javascript 更改它）。
- 我们可以看到 HTML 中的 class 属性没有对应的 class 属性（
class在 JS 中是保留关键字）。但实际上 2 个属性，classList和className.
其它你可能感兴趣的问题