javascript HTML中的properties和attributes有什么区别？

huus2vyu 于 2023-10-14 发布在 Java

关注(0)|答案(8)|浏览(110)

在jQuery 1.6.1中进行了更改之后，我一直在尝试定义HTML中属性和属性之间的区别。
查看jQuery 1.6.1 release notes上的列表（靠近底部），似乎可以将HTML属性和属性分类如下：

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

想法呢？

JavaScript

来源：https://stackoverflow.com/questions/6003819/what-is-the-difference-between-properties-and-attributes-in-html

8条答案

按热度按时间

ntjbwcob1#

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

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

有两个属性（type和value）。
一旦浏览器解析了这段代码，就会创建一个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、type和value属性（以及其他属性）：

id属性是id属性的 reflected property：获取属性读取属性值，设置属性写入属性值。id是一个 pure reflected属性，它不会修改或限制值。
type属性是type属性的 reflected property：获取属性读取属性值，设置属性写入属性值。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），等等。该规范涵盖了各种反射。

赞(0）回复(0）举报 2023-10-14

tzdcorbm2#

在阅读Sime Vidas的回答后，我搜索了更多，并在角文档中找到了一个非常直接和易于理解的解释。

HTML属性vs. DOM属性

属性由HTML定义。属性由DOM（文档对象模型）定义。

一些HTML属性具有到属性的1：1Map。id就是一个例子。
某些HTML属性没有相应的属性。colspan就是一个例子。
某些DOM属性没有相应的属性。textContent就是一个例子。
许多HTML属性似乎Map到属性...但不是你想的那种

最后一个类别是令人困惑的，直到你掌握了这个一般规则：

属性 * 初始化 * DOM属性，然后它们就完成了。属性值可以更改;属性值不能。

例如，当浏览器呈现<input type="text" value="Bob">时，它会创建一个对应的DOM节点，该节点的value属性被初始化为“Bob”。
当用户在输入框中输入“Sally”时，DOM元素valueproperty 变为“Sally”。但是HTML valueattribute 保持不变，如果您询问input元素有关该属性的信息，您会发现：input.getAttribute('value')返回“Bob”。
HTML属性value指定 initial 值; DOM value属性是 current 值。
disabled属性是另一个特殊的例子。按钮的disabled属性默认为false，因此按钮处于启用状态。当您添加disabled属性时，它的存在本身会将按钮的disabled属性更改为true，因此按钮被禁用。
添加和删除disabled属性可以禁用和启用按钮。属性的值是无关紧要的，这就是为什么您不能通过写入<button disabled="false">Still Disabled</button>.来启用按钮
设置按钮的disabled * 属性 * 可禁用或启用按钮。财产的价值是重要的。

HTML属性和DOM属性不是一回事，即使它们具有相同的名称。

赞(0）回复(0）举报 2023-10-14

7vux5j2d3#

答案已经解释了属性和属性是如何不同地处理的，但我真的想指出这是多么的疯狂。在某种程度上，这是一种规范。
这是疯狂的，有一些属性（例如。id，class，foo，bar）在DOM中只保留一种类型的值，而一些属性（例如 * 勾选，选中）保留两个值;即“当它被加载时”的值和“动态状态”的值。（DOM不是应该在其全部范围内表示 * 文档 * 的状态吗？）
这是绝对必要的，两个输入字段，例如。一个 * 文本 * 和一个 * 复选框 * 的行为方式非常相同*。如果文本输入字段不保留单独的“when it was loaded”值和“current，dynamic”值，为什么复选框保留？如果复选框的 checked 属性有两个值，为什么它的 class 和 id 属性没有两个值？如果您希望更改 textinput 字段的值，并且希望DOM（即，“序列化表示”）改变，并反映这种变化，为什么你不希望从一个 * 输入 * 字段类型 * 复选框 * 上的检查属性相同？
“它是一个布尔属性”的区别对我来说没有任何意义，或者至少不是一个充分的理由。

赞(0）回复(0）举报 2023-10-14

sxpgvts34#

HTML属性和属性的区别：

让我们先看看这些词的定义，然后再评估HTML中的区别：

英文定义：

属性是指对象的附加信息。
属性描述了一个对象的特性。
在HTML上下文中：

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

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

同样重要的是要认识到这些属性的Map不是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。

赞(0）回复(0）举报 2023-10-14

hfyxw5xn5#

这些是由w3c指定的，什么是属性，什么是属性http://www.w3.org/TR/SVGTiny12/attributeTable.html
但目前属性和 prop 并没有太大的不同，
但他们更喜欢 prop
首选用途摘要
.prop（）方法应该用于布尔属性/属性和html中不存在的属性（如window.location）。所有其他属性（你可以在html中看到的属性）可以并且应该继续使用.attr（）方法进行操作。
好吧，实际上你不必改变什么，如果你使用attr或prop或两者兼而有之，两者都工作，但我看到在我自己的应用程序，prop工作的地方，atrr没有，所以我在我的1.6应用程序prop =）

赞(0）回复(0）举报 2023-10-14

sdnqo3pr6#

更新我的回答，这是来自https://angular.io/guide/binding-syntax的引用
HTML属性和DOM属性

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

一些HTML属性与属性有1：1的Map;例如ID。
某些HTML属性没有对应的属性;例如，aria-*。
某些DOM属性没有对应的属性;例如，textContent。
**请记住，HTML属性和DOM属性是不同的东西，即使它们具有相同的名称。
**示例1：**an浏览器渲染时，会创建一个对应的DOM节点，该节点带有value属性，并将该值赋值为“Sarah”。

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

当用户在中输入Sally时，DOM元素值属性变为Sally。但是，如果使用input.getAttribute（'value'）查看HTML属性值，您可以看到该属性保持不变-它返回“Sarah”。
HTML属性值指定初始值; DOM值属性是当前值。

**示例2：**a disabled button按钮的disabled属性默认为false，因此按钮处于启用状态。

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

<button disabled>Test Button</button>

添加和删除disabled属性可禁用和启用按钮。但是，属性的值是无关紧要的，这就是为什么您不能通过写入Still Disabled来启用按钮。
若要控制按钮的状态，请改为设置disabled属性。
属性和属性比较虽然您可以在技术上设置[attr.disabled]属性绑定，但是属性绑定的值是不同的，因为属性绑定必须是布尔值，而其对应的属性绑定依赖于值是否为null。考虑以下情况：

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

第一行使用disabled属性，它使用的是一个布尔值。第二行使用disabled属性检查null。
一般来说，使用属性绑定优于属性绑定，因为布尔值易于阅读，语法更短，属性性能更高。

赞(0）回复(0）举报 2023-10-14

hpcdzsge7#

**属性：**属性由HTML定义，用于自定义标签。
**属性：**HTML DOM属性是可以设置或更改的值（HTML元素）。

所以，attributes和properties的主要区别是：*
属性由HTML定义，但属性由DOM定义。
该属性的主要作用是对DOM属性进行修饰。因此，一旦DOM初始化完成，属性工作就完成了。

赞(0）回复(0）举报 2023-10-14

g0czyy6m8#

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

一些HTML属性与属性有1：1的Map;例如
id*
某些HTML属性没有对应的属性;例如

我是艾瑞亚我是艾瑞亚

某些DOM属性没有对应的属性;例如
文本内容 *

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

赞(0）回复(0）举报 2023-10-14

我来回答

javascript HTML中的properties和attributes有什么区别？

8条答案

HTML属性vs. DOM属性

HTML属性和属性的区别：

示例：

相关问题

热门标签

最新问答