JQuery1.11版本对prop和attr接口的含义分离导致问题分析

时间：2016-04-28 01:45:03 阅读：235 评论：0 收藏：0 [点我收藏+]

标签：

prop 和 attr 接口

实验中，在jquery1.7版本， attr("value") 和 val() 接口获取 input 控件的值，都是一致的，都是当前控件值。

但是 jquery1.11版本，已经将这两个接口的返回值分离， attr("value") 获取的是控件的初始值（default value），

只有val（）属性才能获取到控件当前值，例如用户修改了输入的值，必须使用val（）获取最新值。

对于 checkbox 和 radio 等控件，不能使用 val（）接口获取，当前值，需要使用prop("checked")来判断间接判断当前选中控件的值。

经过分析对于input控件， val接口的实现，也是调用prop接口来获取控件的当前值，即 prop("value").

查阅MDN相关资料

https://developer.mozilla.org/zh-CN/docs/Web/API/Element/setAttribute

使用 setAttribute() 修改某些属性值时，可能得不到期望结果，尤其是 XUL 中的 value，这是由于 attribute 指定的是默认值。要访问或修改当前值，应该使用 property 属性。例如，使用 elt.value 代替 elt.setAttribute(‘value‘, val)。

对于属性的改变，或者不改变（保持默认值情况），其当前值并不跟控件的attr属性直接相关。

如果要获取当前属性值，需要使用属性 dom的 property 来获取控件。

https://developer.mozilla.org/en-US/docs/Web/API/Element/setAttribute

Using setAttribute() to modify certain attributes, most notably value in XUL, works inconsistently, as the attribute specifies the default value. To access or modify the current values, you should use the properties. For example, use elt.value instead of elt.setAttribute(‘value‘, val).

什么是attribute?

https://developer.mozilla.org/en-US/docs/Web/API/Element/attributes

　　The Element.attributes property returns a live collection of all attribute nodes registered to the specified node. It is a NamedNodeMap, not an Array, so it has no Array methods and the Attr nodes‘ indexes may differ among browsers. To be more specific, attributes is a key/value pair of strings that represents any information regarding that attribute.

attribute

https://developer.mozilla.org/en-US/docs/Web/API/Attr

This type represents a DOM element‘s attribute as an object. In most DOM methods, you will probably directly retrieve the attribute as a string (e.g., Element.getAttribute(), but certain functions (e.g., Element.getAttributeNode()) or means of iterating give Attr types.

Properties

isId
Indicates whether the attribute is an "ID attribute". An "ID attribute" being an attribute which value is expected to be unique across a DOM Document. In HTML DOM, "id" is the only ID attribute, but XML documents could define others. Whether or not an attribute is unique is often determined by a DTD or other schema description.
name
The attribute‘s name.
ownerElement Deprecated since Gecko 7.0 Obsolete since Gecko 29.0
This property has been removed from Firefox 29. Since you can only get Attr objects from elements, you should already know the owner.
Contrary to above claim, Document.evaluate can return Attr objects from an XPath, in which case you would not easily know the owner.
schemaTypeInfo
?
specified
This property always returns true. Originally, it returned true if the attribute was explicitly specified in the source code or by a script, and false if its value came from the default one defined in the document‘s DTD.
value
The attribute‘s value.

属性表达了 HTML 中标签的属性（属性值为字符串），映射到DOM上表示为 ATTR 对象。

属性表达的是文档层面的表达，为文档加载后的状态和被修改（例如js 调用 setAttribute接口）的行为。

什么是property？

面向对象的思想，对象中的没有成员都是 property。

对于js中，使用dom接口获取的一个dom对象后， dom对象有若干暴露于js语言中的属性，这些属性，可能跟 html 标签中的属性名重复，

例如：

document.getElementById("xx").value // bbb

document.getElementById("xx").value = "aaa" // aaa

document.getElementById("xx").getAttribute("value") //bbb

<!DOCTYPE html>

<html>

 <head>
  <title>Attributes example</title>

 </head>

<body>
<input id="xx"  name="xx" value="bbb">

  <script type="text/javascript">
alert(document.getElementById("xx").value) // bbb

document.getElementById("xx").value = "aaa" // aaa

alert(document.getElementById("xx").value) // aaa

alert(document.getElementById("xx").getAttribute("value"))    //bbb
  </script>

</body>
</html>

也有可能不重复, 例如select控件，没有获取当前值得的value attribute，但是有value property可以获取当前值：

</select>

document.getElementById("xx").value // sss

document.getElementById("xx").value = "bbb" // bbb

document.getElementById("xx").getAttribute("value") //null

<!DOCTYPE html>

<html>

 <head>
  <title>Attributes example</title>

 </head>

<body>
<select id="xx">

<option value="sss"  selected="selected">sss</option>

<option value="bbb">bbb</option>

</select>


  <script type="text/javascript">
alert(document.getElementById("xx").value) // sss

document.getElementById("xx").value = "bbb" 

alert(document.getElementById("xx").value) // bbb

alert(document.getElementById("xx").getAttribute("value"))    //null
  </script>

</body>
</html>

JQuery官网的解释

http://api.jquery.com/prop/

Attributes vs. Properties

The difference between attributes and properties can be important in specific situations. Before jQuery 1.6, the .attr() method sometimes took property values into account when retrieving some attributes, which could cause inconsistent behavior. As of jQuery 1.6, the .prop() method provides a way to explicitly retrieve property values, while .attr() retrieves attributes.

For example, selectedIndex, tagName, nodeName, nodeType, ownerDocument, defaultChecked, and defaultSelected should be retrieved and set with the .prop() method. Prior to jQuery 1.6, these properties were retrievable with the .attr() method, but this was not within the scope of attr. These do not have corresponding attributes and are only properties.

W3HELP给出历史变革的解释

http://w3help.org/zh-cn/causes/SD9006

SD9006: IE 混淆了 DOM 对象属性（property）及 HTML 标签属性（attribute），造成了对 setAttribute、getAttribute 的不正确实现

标准参考

根据 DOM (Core) Level 1 规范中的描述，getAttribute 与 setAttribute 为 Element 接口下的方法，其功能分别是通过 "name" 获取和设置一个元素的属性（attribute）值。getAttribute 方法会以字符串的形式返回属性值，若该属性没有设定值或缺省值则返回空字符串。setAttribute 方法则无返回值。
在 DOM Level 2 规范中，则更加明确了 getAttribute 与 setAttribute 方法参数中的 "name" 的类型为 DOMString，setAttribute 方法参数中的 "value" 的类型为 DOMString，getAttribute 的返回值类型也为 DOMString。
DOMString  getAttribute(in DOMString name);
void    setAttribute(in DOMString name, in DOMString value) raises(DOMException);
HTML 文档中的 DOM 对象的属性（property）被定义在 DOM (HTML) 规范中。这个规范中明确定义了 document 对象以及所有标准的 HTML 元素所对应的 DOM 对象拥有的属性及方法。
因为在早期的 DOM Level 0 阶段，某些 HTML 标签的属性会将其值暴露给对应的 DOM 对象的属性，如 HTML 元素的 id 属性与其对应的 DOM 对象的 id 属性会保持一种同步关系，然而这种方式目前已经废弃，这是由于它不能被扩展到所有可能存在的 XML 的属性名称。W3C 建议使用 DOM (Core) 中 Element 接口上定义的通用方法去获取（getting）、设置（setting）及删除（removing）元素的属性。

举例来说，在一个 HTML 文档中存在一个 SPAN 元素，根据 DOM (HTML) 规范，SPAN 元素在页面中生成一个相对应的对象，这个对象派生自 HTMLElement 接口，而 HTMLElement 接口则继承自 Element 接口。HTMLElement 接口中包含 id 属性。我们可以通过 HTMLElement 接口中的 id 属性获得这个元素的标识符，而通过 Element 接口中的 getAttibute 方法传入参数 "id" 同样可以获得标识符。
虽然这两种方式可以获得相同的值，但是却有着天壤之别。从规范层面上看，getAttribute 方法所属的 DOM (Core) 规范定义了访问和操作文档对象的一套对象和接口，这其中包含了对 HTML 及 XML 的解析及操作；HTMLElement 接口中 id 属性所属的 DOM (HTML) 规范为 DOM (Core) 的扩展，描述了 HTML 及 XHTML 的对象的细节。而从 HTML 文档代码的层面上看，一个元素的标记中的 HTML 属性（attribute）与其对应的 DOM 对象的属性（property）也是完全不同的两个概念。

关于 getAttribute 与 setAttribute 的详细信息，请参考 DOM (Core) Level 1 及 Level 2 中的内容。

关于 HTML DOM 对象的详细信息，请参考 DOM (HTML) Document Object Model HTML，特别是 1.6.1. Property Attributes 中的内容。

property描述：

https://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-642250288

atrribute定义：

https://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-637646024

JQuery1.11版本对prop和attr接口的含义分离导致问题分析

标签：

原文地址：http://www.cnblogs.com/lightsong/p/5441050.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行