A summary of the difference between attribute and property

In the former look at jquery source code, attr () Simple understanding is called the Element.getattribute () and Element.setattribute () method, Removeattr () In simple terms, call Element.removeattribute (), while prop () is simply understood to be the ELEMENT.XXX mode Access property, Removeprop () is deleted by deleting element.xxx.

Attribute and property are the meanings of attributes. So what's the difference?

For this question, asked several groups today, also found some articles (thank them ~ ~)

The main is to see the following several:

Http://gxxsite.com/content/view/id/135.html

http://nuysoft.iteye.com/blog/1172122

Http://www.tuicool.com/articles/3uuQRr6

Http://www.web-tinker.com/article/20115.html

Http://www.cnblogs.com/aaronjs/p/3387906.html

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

Summarized as follows

The The

Attribute	Property	Example
HTML properties	Dom Node Object properties
returns the initialized value	returns the current value	// <input id= "test" type= "text"/> var Test=document.getelementbyid ("test" ); Test.getattribute ( "required" ) // null test.required // false For example, get the value of the current text box
return string	can return multiple formats, either a string or an object	// <input id= "Test" type= "text" style= "color: #666"/> var test= document.getElementById ("Test" / / cssstyledeclaration {0: "Color", Parentrule:null, Length:1, csstext: "Color:rgb (102, 102, 102);", Aligncontent: "", Alignitems: "" ...} Test.getattribute ("style" ) // "color: #666"
return value is the same as the property value in the HTML code	The return value may be different from the property value in the HTML code	// Span style= "color: #008000;" ><a id= "test" href= "/aaa.html" >AAAAA</A> var test= document.getElementById ("Test" href ) // "/aaa.html" test.href // "file:///C:/aaa.html" Also such as the Checked property
can get custom properties in HTML code	can only get native property values	// <input id= "test" type= "text" custom= "text"/> var Test=document.getelementbyid ("test" ); Test.getattribute ( "Custom" ) // "text" test.custom // undefined
DOM tree structure changed when setting value	The DOM tree structure is unchanged when the value is set	// <input id= "test" type= "text" value= "ten"/> var test=document.getelementbyid ("test"); Test.value=20; // <input id= "test" type= "text" value= "ten" >test.setattribute ("value", +)//< Input id= "test" type= "text" value= "> "

Other:

1, Element.classname and Element.getattribute ("class")

2, Element.for (not available) and Element.getattribute ("for")

3, Element.onclick and Element.getattribute ("onclick") (Not available)
4, Element.nodename

5, the difference between the property values in the browser, for example:

// <input id= "test" type= "checkbox" checked= "Checked"/> alert (document.getElementById ("test"). checked); // true (Chrome) // true (IE7) alert (document.getElementById ("test"). GetAttribute ("checked")); // checked (Chrome)   // true (IE7)

6. About JQ

① Performance: Prop>data>attr
Ii

A summary of the difference between attribute and property