HTML中的属性和属性有什么区别?

在jQuery 1.6.1中做出更改之后，我一直在尝试定义HTML中属性和属性之间的区别。

查看jQuery 1.6.1发布说明(接近底部)上的列表，似乎可以将HTML属性和属性分类如下:

属性:所有具有布尔值或UA计算的属性，如selectedIndex。属性:可以添加到既不是布尔值也不包含UA生成值的HTML元素中的“属性”。

想法吗?

当前回答

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

有些属性(例如id, class, foo, bar)在DOM中只保留一种值，而有些属性(例如checked, selected)保留两种值，这是疯狂的;即“加载时”的值和“动态状态”的值。(DOM不应该代表文档的全部状态吗?)

It is absolutely essential, that two input fields, e.g. a text and a checkbox behave the very same way. If the text input field does not retain a separate "when it was loaded" value and the "current, dynamic" value, why does the checkbox? If the checkbox does have two values for the checked attribute, why does it not have two for its class and id attributes? If you expect to change the value of a text *input* field, and you expect the DOM (i.e. the "serialized representation") to change, and reflect this change, why on earth would you not expect the same from an input field of type checkbox on the checked attribute?

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

2011-06-16 19:58:12

其他回答

Attribute:属性由HTML定义，用于自定义标签。

属性:HTML DOM属性是你可以设置或改变的(HTML元素的)值。

所以，属性和属性之间的主要区别是:

属性是由HTML定义的，但属性是由DOM定义的。属性的值是固定的，而属性的值是可变的。该属性的主要作用是初始化DOM属性。因此，一旦DOM初始化完成，属性工作就完成了。

2022-09-22 03:30:56

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

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

2011-06-16 19:58:12

更新我的答案，这是来自https://angular.io/guide/binding-syntax的引用

HTML属性和DOM属性

属性初始化DOM属性，您可以配置它们来修改元素的行为，但属性是DOM节点的特性。

一些HTML属性与属性有1:1的映射关系;例如，id。一些HTML属性没有相应的属性;例如aria-*。一些DOM属性没有相应的属性;例如，textContent。

请记住，HTML属性和DOM属性是不同的东西，即使它们具有相同的名称。

例1:an 当浏览器呈现时，它会创建一个具有value属性的相应DOM节点，并将该值初始化为“Sarah”。

<input type="text" value="Sarah">

当用户将Sally输入到时，DOM元素值属性就变成了Sally。但是，如果您使用input.getAttribute('value')查看HTML属性值，您可以看到属性保持不变—它返回“Sarah”。

HTML属性值指定初始值;DOM value属性是当前值。

例2:禁用按钮按钮的disabled属性默认为false，因此按钮是启用的。

当您添加disabled属性时，您正在将按钮的disabled属性初始化为true，从而禁用按钮。

<button disabled>Test Button</button>

添加和删除disabled属性将禁用和启用按钮。但是，该属性的值是不相关的，这就是为什么不能通过写入Still Disabled来启用按钮的原因。

若要控制按钮的状态，请改为设置disabled属性。

属性和属性比较尽管您可以从技术上设置[attr。禁用]属性绑定，值的不同在于属性绑定必须是一个布尔值，而其对应的属性绑定依赖于该值是否为null。考虑以下几点:

<input [disabled]="condition ? true : false">
<input [attr.disabled]="condition ? 'disabled' : null">

第一行使用了disabled属性，使用了一个布尔值。第二行使用disabled属性检查是否为空。

通常，使用属性绑定而不是属性绑定，因为布尔值更容易读取，语法更短，属性更性能。

2021-05-21 20:48:21

不同的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。

2018-11-28 11:41:01

在阅读了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.

2018-12-25 17:35:07

HTML中的属性和属性有什么区别?

推荐文章

最新文章

标签