Shulou(Shulou.com)06/01 Report--

This article mainly explains "what are the differences between attribute and property in JS". The explanation in this article is simple and clear, easy to learn and understand. Please follow the ideas of Xiaobian and go deeper to study and learn "what are the differences between attribute and property in JS" together!

Property and attribute are very easy to confuse, and the Chinese translations of the two words are also very similar (property: attribute: characteristic), but in fact, they are different things and belong to different categories.

property is an attribute in DOM, an object in JavaScript;

attribute is an attribute on an HTML tag whose value can only be a string;

attribute and property presentation

Simple understanding, Attribute is the attribute of dom node, such as id, class, title, align, etc. commonly used in html.

Property is the DOM element as an object, and its attached content, such as childNodes, firstChild, etc.

There are the following codes:

var in1=document.getElementById("div1");console.log(in1);

For div with id div1, its property content is as follows: (part)

You can see that there is an attribute named "attributes", the type is NamedNodeMap, and there are basic attributes such as "id" and "className","title", but there is no custom attribute "titles".

console.log(in1.id); //div1 console.log(in1.className); //divClass console.log(in1.title); //divTitle console.log(in1.title1); //undefined

As you can see, the attributes in the tag,"id" and "className","title" will be created on in1, but "titles" will not be created. This is because every DOM object will have its default basic properties, and when it is created, it will only create these basic properties, and the properties we customize in TAG tags will not be directly placed in DOM.

Where does the custom "title1" go? You can see the following in the attributes:

"title1" is placed in the attributes object, which records in order the attributes and the number of attributes we define in TAG.

As you can see here, attributes are a subset of properties that hold attributes defined on HTML tags. If you explore each of the attributes in attributes a little further, you'll see that they're not just objects, they're Attr objects with NodeType, NodeName, and so on. We'll look into that later. Note that printing the attribute does not directly get the value of the object, but instead gets a string containing the attribute name and value, such as:

console.log(in1.attibutes.title1); // divTitle1

It follows from this that:

Attributes and values defined in HTML tags are stored in the attributes of the DOM object;

The JavaScript type of these attribute attributes is Attr, not just the property name and value;

Again as follows:

In its property there are the following parts:

Although we don't define "value" in TAG, since it is the default basic attribute of DOM, it will still be created when DOM is initialized.

"Two-timing."

Commonly used attributes, such as id, class, title, etc., have been attached to DOM objects as Properties, and can take the same values and assign values as Properties. However, custom attributes do not have such special privileges, such as:

100

The "title1" in this div does not become a Property.

That is, any attribute (html code) that appears in a DOM tag is an Attribute. Then some common attributes (id, class, title, etc.) are converted to Properties. It can be said vividly that these characteristics/attributes are "pedaling two boats."

Finally note: "class" becomes Property and is called "className" because "class" is the keyword of ECMA.

DOM has default basic properties called "properties" that are created on DOM objects at initialization time anyway.

If you assign values to these attributes in TAG, these values are assigned as initial values to DOM properties of the same name.

attribute and property values and assignments 1, attribute values

"js advanced programming" mentioned, in order to facilitate the operation, it is recommended that we use setAttribute() and getAttribute() to operate.

var id = div1.getAttribute("id"); var className1 = div1.getAttribute("class"); var title = div1.getAttribute("title"); var title1 = div1.getAttribute("title1"); //Custom Properties

getAttribute() can take any attribute, whether standard or custom.

However, there are browser compatibility issues with this method, some browsers may get the value of the attribute Property, so jQuery has to do a test to see if getAttribute() is absolutely getting the value of the attribute Attribute.

div1.className = 'a';var judge = div1.getAttribute("className") === 'a';

If the above code is true, it means that there is a problem with the getAttribute() method and will not be used anymore.

2. attribute assignment div1.setAttribute('class', 'a'); div1.setAttribute('title', 'b'); div1.setAttribute('title1', 'c'); div1.setAttribute('title2', 'd');

With setAttrbute(), any Attribute can be assigned, including custom ones. Moreover, the assigned Attribute is immediately represented on the DOM element.

If they are standard attributes, the values of their associated attributes are updated as well:

Finally, note that both arguments to setAttribute() must be strings. That is, Attribute functions are assigned strings, while attribute Properties can be assigned values of any type.

3. Value of property

Property values are simple. Take any attribute only, use ". "You can:

var id = div1.id; var className = div1.className; var childNodes = div1.childNodes; var attrs = div1.attributes;

Here again:

The name of the class attribute is changed to "className" when it becomes an attribute, so div1.className is the same as div1.getAttrbute ('class ').

div1.attributes in the above code is the attribute of the attribute, which is taken out and saved to the attrs variable. attrs becomes an object of NamedNodeList type, which stores several Attr types.

4. Property assignment

Assignment is the same as basic js object attribute assignment, with ". "That is:

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

Property can be assigned any type of value, while Attribute can only be assigned string!

In addition, the assignment of properties in IE may cause circular references and memory leaks. To prevent this problem, jQuery.data() does special processing to decouple the data from DOM objects.

What happens when you change one of the values of property and attribute in1.value='new value of prop';console.log(in1.value); // 'new value of prop'console.log(in1.attributes.value); // 'value="1"'

At this point, the value of the input field in the page changes to "new value of prop", and the value in promotion also changes to the new value, but the attributes are still "1". It can be inferred from this that the values of the property and attribute attributes of the same name are not bidirectionally bound.

What if, in turn, you set the values in attitudes?

in2.setAttribute('value','ni') console.log(in2.value); //ni console.log(in2.attributes.value); //value='ni'

It follows from this that:

property can be synchronized from attributes;

attribute does not synchronize values on property;

The data binding between attribute and property is unidirectional, attribute->property;

Changing any value on the property and attribute reflects the update to the HTML page.

Thank you for your reading, the above is "JS attribute and property difference what" content, after the study of this article, I believe we have a deeper understanding of JS attribute and property difference what this problem, the specific use of the situation also needs to be verified by practice. Here is, Xiaobian will push more articles related to knowledge points for everyone, welcome to pay attention!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.