Javascript HTML中属性和属性的区别是什么？_Javascript_Html_Dom_Properties

Javascript HTML中属性和属性的区别是什么？

javascript html dom properties

Javascript HTML中属性和属性的区别是什么？,javascript,html,dom,properties,Javascript,Html,Dom,Properties,在jQuery1.6.1中进行了更改之后，我一直在尝试定义HTML中属性和属性之间的区别查看（底部附近）上的列表，似乎可以对HTML属性和属性进行如下分类：属性：所有具有布尔值或已计算的属性，如selectedIndex 属性：可以添加到既不是布尔值也不包含UA生成值的HTML元素的“属性” 想法？w3c规定了什么是属性，什么是属性但目前attr和prop并没有太大的不同，它们几乎是相同的但有些东西他们更喜欢道具首选用法摘要 .prop（）方法应用于布尔属性/属性以及html中不

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

查看（底部附近）上的列表，似乎可以对HTML属性和属性进行如下分类：

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

想法？

w3c规定了什么是属性，什么是属性

但目前attr和prop并没有太大的不同，它们几乎是相同的

但有些东西他们更喜欢道具

首选用法摘要

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

事实上，如果你使用attr或prop或两者都使用，你不必改变某些东西，两者都有效

但我在自己的应用程序中看到，prop在atrr不起作用的地方起作用，所以我在我的1.6 app prop=）

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

例如，此HTML元素：

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

<input id="the-input" type="text" value="Name:">

相应的DOM节点将具有

id

、

type

和

value

属性（以及其他属性）：

```
id
```
属性是
```
id
```
属性的反射属性：获取属性读取属性值，设置属性写入属性值
```
id
```
是一个纯反射属性，它不修改或限制值
```
type
```
属性是
```
type
```
属性的反射属性：获取属性读取属性值，设置属性写入属性值<代码>类型不是纯反射属性，因为它仅限于已知值（例如，输入的有效类型）。如果您有
，那么
```
的input.getAttribute（“type”）
```
为您提供
```
的“foo”
```
，但是
```
的input.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

，

禁用

，

多个

），等等。涵盖了各种类型的反射。

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

让某些属性（例如id、class、foo、bar）在DOM中只保留一种值，而让某些属性（例如checked、selected）保留两种值，这是疯狂的；即“加载时”的值和“动态”的值。（DOM不应该完全代表文档的状态吗？）

非常重要的是，两个输入字段（例如文本和复选框）的行为方式完全相同。如果文本输入字段没有保留单独的“加载时”值和“当前动态”值，为什么复选框会显示？如果复选框的checked属性有两个值，为什么它的class和id属性没有两个值？如果您希望更改文本*输入*字段的值，并且希望DOM（即“序列化表示”）发生更改并反映此更改，那么您究竟为什么不希望checked属性上checkbox类型的输入字段发生相同的更改
“它是一个布尔属性”的区别对我来说没有任何意义，或者至少不是这一区别的充分原因。
区别HTML属性和属性：在评估HTML中的区别之前，让我们先看看这些词的定义：
英文定义：

属性是指对象的附加信息

属性用于描述对象的特征

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

<!DOCTYPE html> <html> <head> <meta charset="utf-8">  <meta name="viewport" content="width=device-width">  <title>JS Bin</title> </head> <body> <div id="foo" class="bar foobar">hi</div>  </body> </html>
console.dir(document.getElementById('foo'));

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

<button disabled>Test Button</button>

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