代码之家 › 专栏 › 技术社区 › Jonathan Wood

<input>元素值属性与控件内容不匹配?复制

jquery html javascript

Jonathan Wood · 技术社区 · 3 年前

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

查看上的列表 jQuery 1.6.1 release notes (接近底部),似乎可以将HTML属性和属性分类如下:

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

思想?

0 回复 | 直到 7 年前

1129

user664833 Ronen Rabinovici 6 年前

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

例如,这个HTML元素:

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

具有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:">

相应的DOM节点将具有 id , 类型 和 价值 属性(以及其他):

这个 身份证件 属性是 反射特性 对于 身份证件 attribute:获取属性读取属性值,设置属性写入属性值。 身份证件 是 纯净的 反射属性,它不会修改或限制值。
这个 类型 属性是 反射特性 对于 类型 attribute:获取属性读取属性值,设置属性写入属性值。 类型 不是一个纯粹的反射属性,因为它仅限于 已知值 (例如输入的有效类型)。如果你有 <input type="foo"> 然后 theInput.getAttribute("type") 给你 "foo" 但是 theInput.type 给你 "text" .
相比之下 价值 属性不反映 价值 属性相反,它是 当前值 的输入。当用户手动更改输入框的值时 价值 属性将反映这一变化。所以如果用户输入 "John" 输入框,然后:
```
theInput.value // returns "John"
```
鉴于
```
theInput.getAttribute('value') // returns "Name:"
```
这个 价值 属性反映 现在的 输入框中的文本内容,而 价值 属性包含 最初的 的文本内容 价值 属性。

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

有几个属性直接反映了它们的属性( rel , 身份证件 ),有些是直接反射,名称略有不同( htmlFor 反映了 for 属性 className 反映了 class 属性),许多反映了它们的属性,但有限制/修改( src , href , disabled , multiple 等等 The spec 涵盖了各种反射。

119

Gourav Pokharkar subtleseeker 4 年前

阅读后 Sime Vidas 的答案,我搜索了更多,在 angular docs .

HTML属性与DOM属性
-------------------------------

属性由HTML定义。属性由DOM定义 (文档对象模型)。

一些HTML属性具有与属性1:1的映射。 id 是一个实例

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

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

许多HTML属性似乎映射到属性。。。但不是在你可能会这么想!

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

属性 初始化 DOM属性,然后它们就完成了。所有物价值观可以改变;属性值不能。

例如,当浏览器渲染时 <input type="text" value="Bob"> , 它使用 value 属性已初始化到“Bob”。

当用户在输入框中输入“Sally”时,DOM元素 价值 所有物 变成了“莎莉”。但是HTML 价值 属性残余如果你询问输入元素,你会发现它是不变的属性 input.getAttribute('value') 返回“Bob”。

HTML属性 价值 指定 最初的 价值DOM 价值 属性是 现在的 价值

这个 disabled attribute是另一个特殊的例子。一个按钮 残废 属性为 false 默认情况下,因此该按钮处于启用状态。什么时候您添加 残废 属性,其存在单独初始化按钮的 残废 属性到 true 因此该按钮被禁用。

添加和删除 残废 属性禁用和启用按钮属性的值无关紧要,这就是为什么无法通过写入启用按钮 <button disabled="false">Still Disabled</button>.

设置按钮 残废 所有物 禁用或启用该按钮。的值 所有物 事项。

HTML属性和DOM属性不是一回事,甚至当他们有相同的名字。

sibidiba 13 年前

答案已经解释了如何以不同的方式处理属性和属性,但我真的想指出 精神失常的 这是。即使在某种程度上是规格。

拥有某些属性(例如。 id,class,foo,bar )在DOM中只保留一种值,而某些属性(例如。 选中,选中 )保留两个值;即“加载时”的值和“动态状态”的值。(DOM不应该代表文件最大程度?)

这是绝对必要的 两个输入字段 ,例如文本和一个 复选框 行为方式完全相同 。如果文本输入字段没有保留单独的“加载时”值和“当前动态”值,为什么要选中复选框?如果复选框有两个值 选中的 属性,为什么它没有两个班和 身份证件 属性? 如果您希望更改的值文本 *输入*字段,并且您期望DOM(即“序列化表示”)发生变化,并反映出这种变化,为什么您不期望输入类型的字段 复选框 在选中的属性上?

“it is a boolean attribute”的区别对我来说没有任何意义,或者至少不是这样做的充分理由。

Willem van der Veen 6 年前

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>

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

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

我们看到以下DOM属性(chrome devtools,并非显示所有属性):

我们可以看到,HTML中的属性id现在也是DOM中的id属性。id已经由HTML初始化(尽管我们可以使用javascript进行更改)。
我们可以看到HTML中的class属性没有相应的class属性( class 是JS中的保留关键字)。但实际上有两种性质, classList 和 className .

Community CDub 4 年前

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

但目前属性和道具并没有太大区别,几乎是一样的

但他们更喜欢道具

首选用法摘要

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

事实上,如果你使用属性或道具,或者两者兼而有之,你不必改变什么,两者都有效但我在自己的应用程序中看到prop在atrr不工作的地方工作,所以我接受了我的1.6应用程序prop=)

mkamal 3 年前

更新我的答案,引用自 https://angular.io/guide/binding-syntax

HTML属性和DOM属性

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

一些HTML属性具有1:1的属性映射;例如id。
有些HTML属性没有相应的属性;例如咏叹调-*。
有些DOM属性没有相应的属性;例如textContent。

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

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

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

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

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

示例2: 禁用的按钮默认情况下,按钮的disabled属性为false,因此按钮处于启用状态。

添加disabled属性时,将按钮的disabled属性初始化为true,从而禁用按钮。

<button disabled>Test Button</button>

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

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

属性和属性比较虽然从技术上讲,您可以设置[attr.disabled]属性绑定,但这些值的不同之处在于,属性绑定必须是布尔值,而其相应的属性绑定取决于该值是否为null。考虑以下内容:

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

第一行使用禁用的属性,使用布尔值。第二行使用禁用的属性检查是否为null。

通常,使用属性绑定而不是属性绑定作为布尔值很容易阅读,语法更短,并且属性更具性能。

samnoon 2 年前

属性属性由HTML定义,用于自定义标记。

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

因此,属性和属性之间的主要区别在于:

属性是由HTML定义的,但属性是由DOM定义的。
属性的值是常量,但属性的值却是可变的。
属性的主要作用是初始化DOM属性。因此,一旦DOM初始化完成,属性作业就完成了。