JQuery1.11 version of the meaning of the prop and attr interface separation leads to problem analysis

prop and attr interfaces

In the experiment, in the jquery1.7 version, attr ("value") and the Val () interface get the value of the input control, which is consistent and is the current control value.

However, the jquery1.11 version has separated the return values of the two interfaces, and attr ("value") gets the initial value of the control (default value).

Only the Val () attribute can get to the current value of the control, such as when the user modifies the input value, and must use Val () to get the latest value.

For controls such as checkbox and radio, you cannot use the Val () interface to get the current value, and you need to use prop ("checked") to determine the value of the currently selected control indirectly.

After parsing the implementation of the Val interface for the input control, it is also called the prop interface to get the current value of the control, that is, prop ("value").

Read the MDN related information

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

setAttribute()When you modify some property values, you may not get the expected results, especially the value in XUL, because attribute specifies the default value. To access or modify the current value, you should use the property attribute. For example, use elt.value instead elt.setAttribute(‘value‘, val) .

The current value of the property is not directly related to the Attr property of the control, or if it does not change (keeping the default value in the case).

If you want to get the current property value, you need to use the property of the properties Dom to get the control.

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

Using to setAttribute() modify certain attributes, most notably in value 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) .

What is attribute?

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

Element.attributes The property returns a live collection of all attribute nodes registered to the specified node. It is a NamedNodeMap , not a Array , so it have no Array methods and the Attr nodes ' indexes may differ among browsers. To being more specific, are attributes 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 the DOM methods, you'll 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 are expected to be unique across a DOM Document. In the HTML DOM, "id" is the only ID of attribute, but XML documents could define others. Whether or not an attribute is the 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

The

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 a XPath, in which case we would not easily Know the owner.

schemaTypeInfo

?

specified

This property is always

returns true . Originally, it returned true if the attribute is 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.

The ATTR property expresses the attribute of the tag in the HTML (the property value is a string), which is mapped to the DOM represented as an object.

The SetAttribute property expresses a document-level representation of the behavior of the document after it is loaded and modified (for example, JS calls the interface).

what is a property?

Object-oriented thinking, no member of the object is a property.

For JS, after a DOM object obtained using the DOM interface, the DOM object has several attributes that are exposed to the JS language, which may be duplicated with the property name in the HTML tag.

For example:

<input id= "xx" name= "xx" value= "BBB" >

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><inputID= "XX"name= "XX"value= "BBB">  <Scripttype= "Text/javascript">alert (document.getElementById ("xx"). Value)//BBBdocument.getElementById ("xx"). Value= "AAA" //AAAalert (document.getElementById ("xx"). Value)//AAAalert (document.getElementById ("xx"). getattribute ("value"))    //BBB  </Script></Body></HTML>

It is also possible not to repeat, such as the Select control, which does not get the currently worthwhile value attribute, but has the Value property to get the current value:

<select id= "XX" >

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

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

</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><SelectID= "XX"><optionvalue= "SSS"selected= "Selected">Sss</option><optionvalue= "BBB">Bbb</option></Select>  <Scripttype= "Text/javascript">alert (document.getElementById ("xx"). Value)//SSSdocument.getElementById ("xx"). Value= "BBB"alert (document.getElementById ("xx"). Value)//BBBalert (document.getElementById ("xx"). getattribute ("value"))    //NULL  </Script></Body></HTML>

the explanation of the jquery website

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-explicitly retrieve property values, while .attr() retrieves a Ttributes.

For example,,,,,,, and should is retrieved and set with the selectedIndex tagName nodeName nodeType ownerDocument defaultChecked defaultSelected .prop() method. P Rior to JQuery 1.6, these properties were retrievable with .attr() the method, but this is not within the scope of attr . These does not have corresponding attributes and is only properties.

W3help gives an explanation of historical change

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

Sd9006:ie confuses DOM object properties and HTML tag attributes (attribute), resulting in incorrect implementation of SetAttribute, getattribute

Standard reference

According to the description in the DOM (Core) Level 1 specification, getattribute and SetAttribute are methods under the element interface, with the function of getting and setting the attribute (attribute) value of an element by "name", respectively. The GetAttribute method returns the value of the property as a string, or an empty string if the property has no set value or default value. The SetAttribute method has no return value.
In the DOM Level 2 specification, it is more explicit that the type of "name" in the GetAttribute and SetAttribute method parameters is the type of "value" in the Domstring,setattribute method parameter is Domstri The return value type of Ng,getattribute is also domstring.

Domstring  getattribute (in domstring name), void    SetAttribute (in Domstring name, in domstring value) raises ( Domexception);

The properties of DOM objects in an HTML document are defined in the DOM (HTML) specification. This specification explicitly defines the properties and methods owned by the document object and the DOM object corresponding to all standard HTML elements.
Because in early DOM level 0, some HTML tag properties would expose their values to the properties of the corresponding Dom object, such as the id attribute of the HTML element and its corresponding DOM object, which would maintain a synchronous relationship, but this method is now obsolete, because it cannot be The attribute name that extends to all possible XML. We recommend using the common method defined on the element interface in the DOM (Core) to get the properties of (getting), set (setting), and delete (removing) elements.

For example, there is a SPAN element in an HTML document that, according to the DOM (HTML) specification, generates a corresponding object in the page, derived from the HtmlElement interface, and the HtmlElement interface inherits from the element connection Mouth. The HtmlElement interface contains the id attribute. We can get the identifier of this element by the id attribute in the HtmlElement interface, and the identifier can be obtained by passing in the parameter "id" via the Getattibute method in the element interface.
Although these two ways can achieve the same value, but there is a difference. From the normative level, the DOM (Core) specification that the GetAttribute method belongs to defines a set of objects and interfaces for accessing and manipulating document objects, including parsing and manipulating HTML and XML; the DOM (HTML) in which the id attribute belongs in the HtmlElement interface The specification is an extension of the DOM (Core) that describes the details of HTML and XHTML objects. At the level of the HTML document code, the HTML attribute (attribute) in the markup of an element and the property of its corresponding DOM object are two completely different concepts.

For more information on getattribute and SetAttribute, refer to the content in DOM (Core) Level 1 and Level 2.

For more information about HTML Dom objects, refer to Dom (HTML) Document object Model HTML, especially 1.6.1. The contents of the property Attributes.

Property Description:

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

Atrribute definition:

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

JQuery1.11 version of the meaning of the prop and attr interface separation leads to problem analysis