First question: What is an attribute & what is a property?

Attributes are key-value pairs we often see in HTML code, such as:

<input id="the-input" type="text" value="Name:" />
Copy the code

The input node in the code above has three attributes:

  • id : the-input
  • type : text
  • value : Name:

Property is the Object field of the DOM node corresponding to the attribute, for example:

HTMLInputElement.id === 'the-input'
HTMLInputElement.type === 'text'
HTMLInputElement.value === 'Name:'
Copy the code

Second question:

From the above example, it seems that attributes and properties are the same. What is the difference between them?

Let’s look at another piece of code:

<input id="the-input" type="typo" value="Name:" />// After the page loads, we type "Jack" in the input.Copy the code

Note that the type attribute in this code is typo, which is not one of the types supported by input.

Let’s look at the attributes and properties of the input node above:

// attribute still remains the original value
input.getAttribute('id') // the-input
input.getAttribute('type') // typo
input.getAttribute('value') // Name:

// property is a different story
input.id // the-input
input.type // text
input.value // Jack
Copy the code

You can see that in an Attribute, the value is still the value in the HTML code. In property, type is automatically modified to text, and value is changed to Jack as the user changes the input

This is the difference between an attribute and a Property:

Attributes always hold their original values in the HTML code, and properties can change.

In fact, the names of these two words can also tell us something:

Attributes tend to be semantically immutable

Properties, on the other hand, tend to be semantically mutable throughout their life cycle

Can the Attribute or Property be customized?

Attribute can do property can’t

We can try to customize attributes in HTML:

<input value="customInput" customeAttr="custome attribute value" />
Copy the code

Then we try to get custom attributes:

input.getAttribute('customAttr') // custome attribute value
input.customAttr // undefined
Copy the code

As you can see, we were able to successfully get the custom attribute, but not the property.

In fact, it is not difficult to understand that the ATTRIBUTE defined in THE HTML specification will be assigned to the property when DOM nodes are initialized, but the custom attribute does not belong to this atmosphere, and the naturally generated DOM node does not have this property.

Some supplement

Note that there are special attributes whose Property names change, for example:

  • for (attr) => htmlFor (prop)
  • class (attr) => className (prop)

(If you find the DOM source code, you should be able to list which attribute names correspond to which properties. If you are interested, try it.)

There are some interesting discussions on StackOverflow about the difference between attributes and properties:

Stackoverflow.com/a/6377829/5…

Some of them think that the value of an attribute represents a defaultValue, while the Property of a DOM node is a different matter. For example, check (attr) corresponds to defaultChecked (prop) and Value (attr) corresponds to defaultValue (prop).

For our restrictions on value in attributes (such as what valid values the input type has), see this link:

www.w3.org/TR/html5/in…

Want to learn more about D3.js and data visualization?

Here is my GIthub address for D3.js, Data Visualization, and welcome to Star & Fork: Tada:

D3-blog

If you think this article is good, check out the link below:)

Making the home page

Zhihu column

The Denver nuggets

Want to contact me directly?

Email address: [email protected]

WeChat:

Welcome to follow my official account: