The front end of Attribute & Property

To show the difference in translation, Attribute typically translated into characteristic, Property be translated attribute.
In using the above, Angular have that attitude

Template binding works with properties and events, not attributes.
Template works by binding property and events, rather than attribute.

jQuery is prop()and attr()how to select, say ...

Two Mainstream Views:

1. For some recognized attribute and property, use setAttribute()the grounds that the property issue is a class mapping past className, not unified name will appear.
2. Little Red Book authors recommend operating DOM property, because the more consistent top performance in the browser.

HTML attribute & DOM property relations and differences

Angular document cited a passage to summarize the relationship and differences between the two:

Comparative HTML DOM property attribute and the
attribute is defined by the HTML. property is a DOM (Document Object Model) defined.
Between 1 has a small amount of HTML attribute and property: 1 mapping, such as id.
Some HTML attribute does not correspond to the property, such as colspan.
Some DOM property no corresponding attribute, such as textContent.

General principles :

1. HTML attribute initialization DOM property, then their mission is complete.
2. Change the value of the attribute is equivalent to initialize DOM property again.
3. Change the value of property, property value changes, attribute value remains unchanged.

A few representative map

HTML attribute	DOM property
id	id
class	className
checked = 'checked'	checked value is true

Case of failure of the general principles

Why is the universal principles? In the low version ie, the operating DOM property of value, attribute the value also changed. Completely unreasonable - -

<input type="text" value="123" id="myInput">

Change the HTML attribute

myInput.setAttribute('value', 'test Attr');  

Browser	myInput.getAttribute('value')	myInput.value
chrome ie11 ff	test Attr	test Attr
ie8	test Attr	test Attr

Change DOM property

document.getElementById('myInput').value = 'test property'; 

Browser	myInput.getAttribute('value')	myInput.value
chrome ie11 ff	123	test property
ie8	Property the Test (under the general principle should be 123)	test property

prop()And attr()choice

• prop()Property DOM is used to change the mode, the corresponding change substantially DOM properties.

Native DOM	jQuery	operating
element.value	$element.prop( name[,value])	Read and write
delete element.propertyName	$element.removeProp( propertyName )	delete

• attr() It is used to change the way HTML attribute, attribute of the three methods of operation corresponds substantially DOM provided.

Native DOM	jQuery	operating
element.getAttribute(name)	$element.attr(name)	read
element.setAttribute(name,value)	$element.attr(name ,value)	write
delete element.removeAttribute(name)	$element.removeAttr( name )	delete

summary

• Get some labels above custom property, or does not change the basic characteristics when used in most cases attr()( data-*except the like).

  <form action="test.php" user-my-name="nilinli" method="post"></form>

  $('form').attr('user-my-name'); // nilinli
  $('form').attr('action'); // test.php

• In other cases, the operation DOM interaction with the page, under normal circumstances withprop()
• In general, try to operate DOM property, not only in the DOM property (custom attribute or no relevant maps), before going to operate HTML attribute.