Longyang County grass lake (yuan) Tang Wen such as the west wind blowing old dongting wave, night Xiang jun white hair. Drunk after I do not know the day in the water, full boat clear dream pressure star river.Copy the code

1. Differences in basic concepts

  • Attribute: Indicates an ATTRIBUTE on an HTML tag, such as ID, class, value, and custom attributes

    Its value can only be a string, and there are three related methods for this attribute: setAttribute, getAttribute, and removeAttribute.

  • Property: is the value of a property on a DOM object that JS gets, such as a, which you can think of as a basic JS object.

    This node contains properties such as value, className, and methods such as onclik.

Attributes are attributes that come with DOM nodes. Attributes and values defined in HTML tags are stored in the ATTRIBUTES Attribute of DOM objects. Property is the content attached to the DOM element as an object, such as childNodes, firstChild, etc., and is the default base Property, which is created when the DOM element is created.

Conclusion:

    1. Property and Attributies are subsets of Properties, and each attribute is a subset of Attributies;
    1. Attributes can be interpreted as features and can be customized. Attributes added to HTML tags are the same as those added using setAttribute. That is, ATTRIBUTES are added to HTML tags, and properties are xx. Properties change, and generally, changes affect each other (except value)
    1. When new non-default attributes are added, they do not communicate;
    1. Some special attributes require special treatment.

Value and assignment of attribute and property

1. Attribute value

As mentioned in JS Advanced Programming, setAttribute() and getAttribute() are recommended for easy operation.

<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"); // Custom featuresCopy the code

2. Attribute assignment

 div1.setAttribute('class'.'a');
 div1.setAttribute('title'.'b');
 div1.setAttribute('title1'.'c');
 div1.setAttribute('title2'.'d');
Copy the code

Use setAttrbute() to assign values to any Attribute, including custom ones. Furthermore, the assigned Attribute is immediately displayed on the DOM element.

If they are standard features, the values of their associated attributes are also updated:

Note: When using setAttribute, the function must take two arguments, setAttribute (attributeName,value), which will be compiled as a string regardless of the value type. Adding attributes to an HTML tag is essentially the same as writing attributes inside the tag, so the attribute values will eventually be compiled as strings.

3. Property value

Property values are simple. To take only of any attribute, use “. You can:

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

Here again:

  • When the class property becomes an attribute, the name is changed to “className”, so div1.classname and div1.getattrbute (‘class’) are the same.
  • Attributes in the above code is the attributes attribute, which is taken and stored in the attrs variable. Attrs becomes an object of type NamedNodeList that stores several Attr types.

4, Property assignment

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!

What happens when you change one of the property and attribute values

From this, it can be concluded that:

  • Properties can be synchronized from attributes;
  • Attribute also synchronizes values on the property;
  • The data binding between attribute and property is bidirectional;
  • Changing any value on the property and attribute reflects the update to the HTML page.