Attribute and property properties of DOM elements in JS

One, ' cousin ': attribute and property

Why is it called attribute and property as ' cousin '? Because they have both common place and different points.

attributeIs the attribute that the DOM element has in the document as an HTML tag;
propertyIs the property that the DOM element owns as an object in JS.

As you can see from the definition:

• For the standard attributes of HTML, the attribute and property are synchronized and are automatically updated.
• However, for custom properties, they are not synchronized. (Custom attributes are not automatically added to property)
• The value of the property can be changed; the value of attribute cannot be changed

Two, the two output form

1. Print two values separately

Print Attribute Properties

//html<div class="divClass" id="divId" ></div>//jswindow.onload = function(){    var divId = document.getElementById('divId');    console.log(divId.attributes);}

You can see the value of attributes, and we'll print it:

console.log(divId.attributes[0]);       //打印 class="divClass"console.log(divId.attributes.class)     //打印 class="divClass"console.log(divId.getAttribute('class'))    //打印divClassconsole.log(divId.getAttribute('id'))    //打印divId

The above two sets of values are found to be equal.

Although all can be value, but "JS Advanced program Design" mentioned, in order to facilitate the operation, we recommend that you use SetAttribute () and getattribute () to operate.

Print Property
HTML-brought Dom attributes are automatically converted to property, but custom properties do not have this ' right '
Use the div tag directly as an object, using '. ' The output is the property attribute
But note that!property is not able to lose the custom attribute.

<div class="divClass" id="divId" addUserDefine="zidingyi"></div>console.log(divId.class);           //打印 divClassconsole.log(divId.addUserDefine)    //打印 undefined

Open the properties of the elements, you can see that the DOM exists in the attributes, the property also inherited, but addUserDefine did not appear in the attribute

Property

var obj = {};Object.defineProperty(obj,'name',{    value:'Property'})console.log(obj.name)   //打印 Property

Third, use examples to analyze the two values

If we modify the value of the property

//html<input value="initValue" id="ipt"/>//jswindow.onload = function(){    var ipt = document.getElementById('ipt');    ipt.value = 'changeValue'    console.log(ipt.value);    console.log(ipt.getAttribute('value'));}

Guess the result??
The answer is:

console.log(ipt.value);         //changeValueconsole.log(ipt.getAttribute('value'));     //initValue

Let's look at the value of input again.

Incredible?
Let's take a look at the change attribute start

//html<input value="initValue" id="ipt"/>//jswindow.onload = function(){    var ipt = document.getElementById('ipt');    ipt.setAttribute('value','changeValue')    console.log(ipt.value);    console.log(ipt.getAttribute('value'));}

Output:

console.log(ipt.value);         //changeValueconsole.log(ipt.getAttribute('value'));     //changeValue

Summarized as follows:

1. Property than attribute ' overbearing ', estimated to be ' cousin '
   
2. Property and attribute both belong to unilateral correspondence, namely:
   

1.property能够从attribute中得到同步；2.attribute不会同步property上的值；

One more word:
You can assign any type of value to property properties, but only string for attribute attribute!

//jsvar obj = {    value : false,}var ipt = document.getElementById('ipt');obj.value = true;       //property更改ipt.setAttribute('value',true)  //attribute更改console.log(typeof obj.value);  //booleanconsole.log(obj.value)          //trueconsole.log(typeof ipt.value)   //stringconsole.log(ipt.value);         //true

Prosperous, thanks for reading, Welcome to correct!