About attribute and property, and their impact on option in select

It's a cliché, but until now I'm still confusing it. Some of the respective features are listed below.

	Attribute	Property
Setup method	Option.setattribute (' selected ', true) Option.getattribute (' selected ')	Option.selected = True
DOM node representation	will appear on the HTML node. Open the console and you can see <option selected=true></option>	Does not appear in HTML. Open the console, lone :<option></option>
Data type	When you pass an object to attribute, it is converted to a string type, Based on the performance characteristics of the DOM nodes, it is well understood that the HTML code is a string that cannot have any data type. Like what: Option.setattribute (' Test ', {}) Option.getattribute (' Test ') You will get "[Object Object]", which automatically calls the Object.ToString method	And when you pass an object to the property, you can keep the object. Like what: Option.test = {}; This is a code-level thing that doesn't have anything to do with HTML.

From the above we can see:

Attribute always tries to correlate with the HTML code string, and the operation of attribute is reflected directly in the HTML code of the page. Attribute This feature allows us to define certain variables before the JS code executes, and then get them when JS executes, although these variables are string types, but defining variables in advance allows us to implement a lot of things, it is widely used in the Smarty template.

If you want to save the variable to a DOM node during JS execution, use the property, which can save the variable type perfectly, so that the function of the built-in implementation on the DOM node can be easily understood as property.

Let's talk about the performance of these two things when the browser executes, using select,option as a chestnut.

<select>

<option id= "One" value= "1" > Beijing </option>

<option id= "value=" 2 "> Shanghai </option>

</select>

Code	Property	Attribute	Check Status
	One:true Two:falss	One:null Two:null	Default state, one selected
Set the attribuite of the other to make it select Two.setattrbute (' selected ', true)	One:false Two:true	One:null Two:true	Both selected Although we set the Attribuite, the property changed. Here the one.selected automatically becomes false. Two.selected automatically becomes true
Then we set up one of the attrbute and let it select One.setattribute (' selected ', true)	One:true Two:false	One:true Two:true	One selected Once you have set up the attribute of one, the property automatically changes accordingly But attribute strictly according to our code, retains the properties we set, so there are two attribute are true.
Then we set up the attribuite again and let it select Two.setattrbute (' selected ', true)	One:false Two:true	One:true Two:true	Both selected As we can see, Attibuite has not changed.

property, more like a response to the current state of the browser, not only the code affects it, but the user's interaction can also affect it. And Attibute just depends on the execution of the code, just your code can change it.

For a browser control, there are special properties that determine its performance and actions, such as value,selected. The value of the property is essentially in effect. However, when we set the attribute, we also automatically trigger the change of propery (as can be seen from the table above, as long as the attribute value changes or not, as soon as the assignment will cause propery changes), so as to control the control action style. In contrast, when we set propery, we do not change the attribute, only control the action style of the control.

About attribute and property, and their impact on option in select