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

Question

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

sch*_*ing 353 html javascript dom properties

在jQuery 1.6.1中进行了更改之后,我一直在尝试在HTML中定义属性和属性之间的区别.

查看jQuery 1.6.1发行说明(靠近底部)的列表,似乎可以按如下方式对HTML属性和属性进行分类:

属性:所有具有布尔值或UA计算的值,例如selectedIndex.
属性:可以添加到既不是布尔值也不包含UA生成值的HTML元素的"属性".

思考？

Answer 1

Šim*_*das 749

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

例如,这个HTML元素:

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

Run Code Online (Sandbox Code Playgroud)

有2个属性(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:">

Run Code Online (Sandbox Code Playgroud)

相应的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"
```
Run Code Online (Sandbox Code Playgroud)
然而:
```
theInput.getAttribute('value') // returns "Name:"
```
Run Code Online (Sandbox Code Playgroud)
该value属性反映输入框内的当前文本内容,而该value属性包含HTML源代码中属性的初始文本内容value.

因此,如果您想知道文本框中当前的内容,请阅读该属性.但是,如果您想知道文本框的初始值是什么,请阅读该属性.或者您可以使用defaultValue属性,它是属性的纯粹反映value:
```
theInput.value                 // returns "John"
theInput.getAttribute('value') // returns "Name:"
theInput.defaultValue          // returns "Name:"
```
Run Code Online (Sandbox Code Playgroud)

有几个属性,可直接反映他们的属性(rel,id),有些是用稍微不同的名称直接反射(htmlFor反映for属性,className体现了class属性),许多反映他们的属性,但有限制/修改(src,href,disabled,multiple)等上.规范涵盖了各种反射.

@oss您的链接指的是HTML属性列表.该列表不含糊 - 这些属性. (3认同)
我在哪里可以找到属性的完整属性列表(如`for` - >`htmlFor`),以及类似的属性列表,它从属性中获取初始值,但不反映它(`input.value`).我希望这可能会出现在像https://github.com/Matt-Esch/virtual-dom这样的库的源头,但它并没有真正记录下来. (3认同)

Answer 2

sib*_*iba 43

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

让一些属性(例如id,class,foo,bar)在DOM中只保留一种值,而某些属性(例如,检查,选择)保留两个值是很疯狂的.也就是说,"当它被加载时"的值和"动态状态"的值.(DOM应该是否完全代表文档的状态？)

绝对必要的是,两个输入字段(例如文本和复选框)的 行为方式完全相同.如果文本输入字段没有保留单独的"加载时"值和"当前,动态"值,为什么复选框？如果复选框对checked属性有两个值,为什么它的class和id属性没有两个？如果您希望更改text*input*字段的值,并且您希望更改DOM(即"序列化表示")并反映此更改,那么为什么您不希望在输入字段中输入相同的内容键入复选框 在已检查的属性？

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

这不是疯了.你误会了.`checked`属性由`defaultChecked`属性表示(同样对于文本输入,`value`属性由`defaultValue`属性表示).第二个属性`checked`,需要表示是否选中了复选框,因为这是复选框功能的固有部分:它是交互式的并且可以更改(如果存在表单重置按钮,则重置为默认值)用户以某种方式,例如`id`这样的另一个属性不是.这与它是布尔属性的事实无关. (46认同)
这不是答案,但我同意你的意见; 这完全是疯了. (20认同)
@TimDown我仍然认为它是"疯狂的",因为任何逻辑方法都会使属性名称与属性名称匹配,或者至少没有与之无关的属性名称和属性名称匹配(即checked属性指的是defaultChecked财产,而被检查的财产是无关的).实际上,每个人都假设的逻辑方法是一开始的情况是根本不分离属性和属性.属性不应该是不可变的,但应始终反映属性值.两者之间不应该有区别. (10认同)
如果你明白为什么它是这样锻造的，那就不算疯狂了。之所以这样做，是因为“forms”有一个重置方法，而该重置方法需要从 HTML 属性中读取原始数据。 (4认同)
@TimDown - 谢谢.那真的让我超过了WTF？驼峰. (3认同)

Answer 3

sub*_*ker 28

阅读Sime Vidas的答案后，我进行了更多搜索，并在Angular文档中找到了一个非常简单易懂的解释。

HTML属性与DOM属性

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

一些HTML属性具有1：1到属性的映射。id就是一个例子。

一些HTML属性没有相应的属性。colspan就是一个例子。

某些DOM属性没有相应的属性。textContent 就是一个例子。

许多HTML属性似乎可以映射到属性...但是并不是您想的那样！

在您掌握以下一般规则之前，最后一类令人困惑：

属性初始化 DOM属性，然后完成。属性值可以改变；属性值不能。

例如，当浏览器渲染时<input type="text" value="Bob">，它将创建一个具有value初始化为“ Bob” 的属性的相应DOM节点。

当用户在输入框中输入“ Sally”时，DOM元素value 属性将变为“ Sally”。但是，如果您向输入元素询问该属性，则HTML value 属性保持不变：input.getAttribute('value')返回“ Bob”。

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

该disabled属性是另一个特殊的示例。默认情况下，按钮的 disabled属性是false默认设置，因此该按钮处于启用状态。当您添加disabled属性时，仅其存在就将按钮的disabled属性初始化为，true因此该按钮被禁用。

添加和删除disabled属性将禁用并启用该按钮。该属性的值无关紧要，这就是为什么您不能通过编写来启用按钮的原因<button disabled="false">Still Disabled</button>.

设置按钮的disabled 属性将禁用或启用按钮。财产的价值至关重要。

HTML属性和DOM属性即使名称相同，也不相同。

Answer 4

Dan*_*Ruf 10

这些是由w3c指定什么是属性,什么是属性 http://www.w3.org/TR/SVGTiny12/attributeTable.html

但目前attr和prop并没有那么不同,而且几乎相同

但他们更倾向于支持某些事情

首选用法摘要

.prop()方法应该用于布尔属性/属性以及html中不存在的属性(例如window.location).所有其他属性(您可以在html中看到的属性)可以并且应该继续使用.attr()方法进行操作.

实际上你没有必要改变一些东西,如果你使用attr或道具或两者兼而有之,但我在自己的应用程序中看到道具工作在atrr没有这样我接受我的1.6 app prop =)

该文档涉及SVG而不是HTML. (3认同)

Answer 5

Wil*_*een 8

区别 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>

Run Code Online (Sandbox Code Playgroud)

然后我们检查<div>, 在 JS 控制台中：

 console.dir(document.getElementById('foo'));

Run Code Online (Sandbox Code Playgroud)

我们看到以下 DOM 属性（chrome devtools，未显示所有属性）：

我们可以看到 HTML 中的 id 属性现在也是 DOM 中的 id 属性。id 已由 HTML 初始化（尽管我们可以使用 javascript 更改它）。
我们可以看到 HTML 中的 class 属性没有对应的 class 属性（class在 JS 中是保留关键字）。但实际上 2 个属性，classList和className.

这个答案非常好，因为它显示了_示例_，如果没有示例，属性和属性之间的区别很容易被忽略。 (2认同)

Answer 6

mka*_*mal 5

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

\n

HTML 属性和 DOM 属性

\n

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

\n

一些 HTML 属性与属性具有 1:1 映射关系；例如，id。
\n
有些 HTML 属性没有相应的属性；例如，aria-*。
\n
有些 DOM 属性没有对应的属性；例如，文本内容。
\n

\n

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

\n

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

\n

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

Run Code Online (Sandbox Code Playgroud)\n

当用户在中输入 Sally 时，DOM 元素值属性将变为 Sally。但是，如果您使用 input.getAttribute(\'value\') 查看 HTML 属性值，您可以看到该属性保持不变\xe2\x80\x94，它返回“Sarah”。

\n

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

\n

示例 2：禁用按钮\n按钮的禁用属性默认为 false，因此该按钮处于启用状态。

\n

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

\n

<button disabled>Test Button</button>\n

Run Code Online (Sandbox Code Playgroud)\n

添加和删除禁用属性会禁用和启用该按钮。但是，该属性的值是无关紧要的，这就是为什么您无法通过编写 Still Disabled 来启用按钮的原因。

\n

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

\n

属性和属性比较\n虽然您可以在技术上设置 [attr.disabled] 属性绑定，但值有所不同，因为属性绑定必须是布尔值，而其相应的属性绑定依赖于该值是否为 null。考虑以下：

\n

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

Run Code Online (Sandbox Code Playgroud)\n

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

\n

通常，使用属性绑定而不是属性绑定，因为布尔值易于阅读，语法更短，并且属性性能更高。

\n

归档时间：	14 年，6 月前
查看次数：	158532 次
最近记录：	6 年，11 月前