Property is a property in the DOM, it’s an object in JavaScript;

**attribute** is a feature on the **HTML tag **, whose value can only be a string;

Attributes are a subset of properties

Attribute

Attribute is the inherent Attribute of a DOM node, such as ID, class, title, and align in HTML.

Every DOM object will have its default base properties, and when created, it will only create those base properties. The custom properties in the TAG TAG will not be placed directly in the DOM.

Attributes and values defined in the HTML tag are stored in the ATTRIBUTES attribute of the DOM object.

Attribute Specifies the value

GetAttribute () : Get any feature, whether standard or custom.

SetAttribute () : Use setAttrbute() to assign a value to any Attribute, including a custom one. Furthermore, the assigned Attribute is immediately displayed on the DOM element.

<div id="div1" class="divClass" title="divTitle" align="left" title1="divTitle1"></div> var id = div1.getAttribute("id"); var className1 = div1.getAttribute("class"); var title = div1.getAttribute("title"); var title1 = div1.getAttribute("title1"); Div1.setattribute ('class', 'a'); div1.setAttribute('title', 'b'); div1.setAttribute('title1', 'c'); div1.setAttribute('title2', 'd');Copy the code

** Finally, note that both arguments to setAttribute() must be strings. ** is a string that assigns values to the Attribute function, whereas Property can assign any type of value.

Property

Property is the object attached to the DOM element, such as childNodes, firstChild, and so on.

However, only common attributes (ID, class, title, etc.) are converted to the Property object. Custom attributes are not converted to the Property object.

Property Specifies the value and assignment

Property values are simple. For any attribute, use ** “. ** can:

var id = div1.id; var className = div1.className; //className class var childNodes = div1.childNodes; var attrs = div1.attributes;Copy the code

Assignment is the same as basic JS object attribute assignment, using “. You can:

div1.className = 'a';
div1.align = 'center';
div1.AAAAA = true;
div1.BBBBB = [1, 2, 3];
Copy the code

Property can be assigned to any type of value, whereas Attribute can only be assigned to a string!

conclusion

  • Properties can be synchronized from attributes;
  • Attribute does not synchronize values on property;
  • The data binding between attribute and property is one-way, attribute->property;
  • Changing any value on the property and attribute reflects the update to the HTML page;