在jQuery 1.6.1中做出更改之后，我一直在尝试定义HTML中属性和属性之间的区别。
查看jQuery 1.6.1发布说明(接近底部)上的列表，似乎可以将HTML属性和属性分类如下:
属性:所有具有布尔值或UA计算的属性，如selectedIndex。 属性:可以添加到既不是布尔值也不包含UA生成值的HTML元素中的“属性”。
想法吗?
当前回答
不同的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>
然后我们在JS控制台中检查<div>:
console.dir(document.getElementById('foo'));
我们看到下面的DOM属性(chrome devtools，不是所有的属性):
我们可以看到，HTML中的属性id现在也是DOM中的id属性。id已经被HTML初始化(尽管我们可以用javascript改变它)。 我们可以看到，HTML中的class属性没有相应的class属性(class是JS中的保留关键字)。实际上有两个属性，classList和className。
其他回答
这些都是w3c指定的什么是属性，什么是属性 http://www.w3.org/TR/SVGTiny12/attributeTable.html
但是目前attr和prop并没有太大的不同，几乎是一样的
但有些东西他们更喜欢道具
首选用途摘要 .prop()方法应该用于布尔属性/属性以及html中不存在的属性(例如window.location)。所有其他属性(您可以在html中看到的属性)可以并且应该继续使用.attr()方法进行操作。
实际上你不需要改变什么如果你使用attr或prop或两者都可以，两者都可以 但我在自己的应用程序中看到，道具在atrr没有工作的地方工作，所以我在1.6应用程序中使用道具=)
Attribute:属性由HTML定义，用于自定义标签。
属性:HTML DOM属性是你可以设置或改变的(HTML元素的)值。
所以，属性和属性之间的主要区别是:
属性是由HTML定义的，但属性是由DOM定义的。 属性的值是固定的，而属性的值是可变的。 该属性的主要作用是初始化DOM属性。因此，一旦DOM初始化完成，属性工作就完成了。
在编写HTML源代码时，可以在HTML元素上定义属性。然后，一旦浏览器解析了您的代码，就会创建相应的DOM节点。该节点是一个对象，因此它具有属性。
例如，这个HTML元素:
<input type="text" value="Name:">
有2个属性(类型和值)。
一旦浏览器解析了这段代码，一个HTMLInputElement对象将被创建，这个对象将包含几十个属性，如:accept, accessKey, align, alt, attributes, autofocus, baseURI, checked, childElementCount, childNodes, children, classList, className, clientHeight等。
对于给定的DOM节点对象，属性是该对象的属性，而属性是该对象的attributes属性的元素。
为给定的HTML元素创建DOM节点时，它的许多属性与具有相同或相似名称的属性相关，但这不是一对一的关系。例如，对于这个HTML元素:
<input id="the-input" type="text" value="Name:">
相应的DOM节点将具有id、类型和值属性(以及其他属性):
The id property is a reflected property for the id attribute: Getting the property reads the attribute value, and setting the property writes the attribute value. id is a pure reflected property, it doesn't modify or limit the value. The type property is a reflected property for the type attribute: Getting the property reads the attribute value, and setting the property writes the attribute value. type isn't a pure reflected property because it's limited to known values (e.g., the valid types of an input). If you had <input type="foo">, then theInput.getAttribute("type") gives you "foo" but theInput.type gives you "text". In contrast, the value property doesn't reflect the value attribute. Instead, it's the current value of the input. When the user manually changes the value of the input box, the value property will reflect this change. So if the user inputs "John" into the input box, then: theInput.value // returns "John" whereas: theInput.getAttribute('value') // returns "Name:" The value property reflects the current text-content inside the input box, whereas the value attribute contains the initial text-content of the value attribute from the HTML source code. So if you want to know what's currently inside the text-box, read the property. If you, however, want to know what the initial value of the text-box was, read the attribute. Or you can use the defaultValue property, which is a pure reflection of the value attribute: theInput.value // returns "John" theInput.getAttribute('value') // returns "Name:" theInput.defaultValue // returns "Name:"
有几个属性直接反映了它们的属性(rel, id)，一些是名称略有不同的直接反映(htmlFor反映了for属性，className反映了class属性)，许多反映了它们的属性，但有限制/修改(src, href, disabled, multiple)，等等。该规范涵盖了各种反射。
不同的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>
然后我们在JS控制台中检查<div>:
console.dir(document.getElementById('foo'));
我们看到下面的DOM属性(chrome devtools，不是所有的属性):
我们可以看到，HTML中的属性id现在也是DOM中的id属性。id已经被HTML初始化(尽管我们可以用javascript改变它)。 我们可以看到，HTML中的class属性没有相应的class属性(class是JS中的保留关键字)。实际上有两个属性，classList和className。
在阅读了Sime Vidas的回答后，我又搜索了更多，在angular文档中找到了一个非常直接易懂的解释。
HTML属性vs. DOM属性 -------------------------------
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 <input type="text" value="Bob">, 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 <button disabled="false">Still Disabled</button>. 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.
推荐文章
- 我如何使用Jest模拟JavaScript的“窗口”对象?
- 如何使Bootstrap 4卡在卡列相同的高度?
- 我如何等待一个承诺完成之前返回一个函数的变量?
- 在JavaScript中根据键值查找和删除数组中的对象
- 使嵌套JavaScript对象平放/不平放的最快方法
- 使用域集图例引导
- 如何以及为什么'a'['toUpperCase']()在JavaScript工作?
- 音频停止功能
- 有Grunt生成index.html不同的设置
- 如何禁用谷歌翻译从HTML在Chrome
- 文档之间的区别。addEventListener和window。addEventListener?
- 如何检查动态附加的事件监听器是否存在?
- 如何写setTimeout与参数Coffeescript
- 将JavaScript字符串中的多个空格替换为单个空格
- 向HTML表中添加水平滚动条
