Analysis of the attribute and property of JavaScript

1, Attribute

Attributes are properties that are set on HTML, explicitly set in HTML, or set by the SetAttribute () method.

<input type= ' text ' id= ' txt ' a=b/>

For example such a section of HTML code, in fact it has three attribute attributes, we can print out to see:

var a = document.getElementById (' txt ');
Console.log (a.attributes);

For attribute, it has three commonly used methods setattribute (), getattribute (), and RemoveAttribute ():

var a = document.getElementById (' txt ');
A.setattribute (' value ', ' test ');
Console.log (A.getattribute (' a ')); B
A.removeattribute (' a ');
Console.log (A.getattribute (' a ')); Null

For properties that are set and deleted with the setattribute () and RemoveAttribute () methods, the code for the HTML page is reflected in real time. Attribute value can only be a string, property key case insensitive, such as:

<input type= ' text ' id= ' txt ' a=b a= ' C '/>

You can open the console to see the HTML structure of the code (A is automatically hidden).

You can say that if you want to get an attribute value for a DOM element, just open the console and look at the HTML code for the DOM tag, and the attribute value and the property values set in the HTML tag are synchronized at any time.
2. Property

property is a bit more complicated than attribute. The DOM is an object in JavaScript, the property is an attribute in the DOM, and its property value is mainly obtained and changed by the dot operator. This object implements a number of properties: ' Value ', ' className ', and some method Getattribute,setattribute, which can also add custom attributes and methods like other JavaScript objects. The value of the property can be any data type, sensitivity to case sensitive, custom property will not appear in the HTML code, only JS.

Or the example code, what is his property attribute value?

<input type= ' text ' id= ' txt ' a=b/>
<script type= "Text/javascript" >
var a = document.getElementById (' txt ');
Console.log (A.type); Text
Console.log (a.id); Txt
Console.log (A.A); Undefined
Console.log (A.title); // ''
</script>

We set the A attribute in the INPUT element of the HTML page, but it is not accessible in the property; instead, we do not have the title set in the HTML page, and access it does not reflect undefined! What's going on? Because all HTML elements are represented by the HtmlElement type, the HtmlElement type directly inherits from the element and adds some attributes, each of which has the following 5 standard attributes: Id,title,lang,dir, ClassName (these attributes are manipulated in the DOM to be synchronized to the HTML tag). So even if no ID, title, etc. is specified in HTML, an empty string is assigned by default, which can be accessed by the property attribute (dot operator). Otherwise, other attributes set in HTML are not accessible through property (attribute-specific attributes).

If you think of a DOM element as a normal object, the property is an attribute that is stored in object in the form of a name value pair (name= ' value '). Adding and removing property is much simpler, and it's no different than a normal object:

var a = document.getElementById (' txt ');
A.age = 10;
Console.log (A.age); 10
Delete A.age;
Console.log (A.age); Undefined

In addition to the ID, title, and other 5 properties (each element elements have), individual elements have special attributes, such as the INPUT element has name,a elements have href and so on.
3, Attribute vs Property

Since it is said that some attributes can be changed through attribute access, but also through the property, then what should be noted in place?

The reason why attribute and property are easy to mix 倄 is that many attribute nodes also have a corresponding property attribute, such as div element ID and class are attribute, There is also the corresponding property (ID and classname), regardless of which method can be accessed and modified, if these properties are assigned in tag, then these values will be assigned as the initial value to the DOM of the same name.

Value of INPUT element

The Value property of the INPUT element is a big pit daddy, look at the following code:

var a = document.getElementById (' txt ');
A.setattribute (' value ', ' test ');
Console.log (A.value); Test

A.value = ' Change ';
Console.log (A.getattribute (' value ')); Test

Changing the value with the dot operator does not update the value of the attribute, and instead of updating the value with attribute, it is reflected on the property ... Pit, who prescribed it!

Form elements

Some of the default common attribute nodes of a DOM element have property properties corresponding to them, especially those with Boolean types, such as some form elements. For these special attribute nodes, as long as the node exists, the value of the corresponding property is true, such as:

<input type= ' Radio ' checked= ' checked ' id= ' Radio ' >
<script>
var radio = document.getElementById (' Radio ');
Console.log (Radio.getattribute (' checked ')); ' Check '
Console.log (radio.checked); True
</script>

Disabled similar.

Href

The two are also different for the acquisition of HREF, attribute is taken to the actual set value (relative path), and the property gets the absolute path:

<a href= ' a.html ' id= ' web ' > </a>
<script>
var radio = document.getElementById (' web ');
Console.log (Web.getattribute (' href ')); ' A.html '
Console.log (WEB.HREF); The path of absolute degree
</script>

4, summary

Attribute attributes are set on HTML, are reflected on the HTML code, the two are synchronized, and property properties can be treated as key-value pairs of Dom objects and manipulated with dot operators.

In actual programming, the basic DOM operation is to use the property's point operator.

There are only two situations in which you have to use attribute:

Custom HTML Attribute because it is not synchronized to the DOM property
Access to the built-in HTML tags, these attributes can not be synchronized from the property, such as the input label value (can be used to check whether the input value changes)