The introduction

When I read the Vue API and interpreted the v-bind directive, the.prop modifier was interpreted as a DOM property binding rather than as an attribute binding. I’m curious, although I haven’t explored the specific differences between the two in detail for so long. Follow the link to Stack Overflow for a question and discussion related to this. The content of the discussion has also been edited by many cattle and summarized in detail. I want to share and record the content here in the blog. But time, has been in the blog draft box, the end of the year is not very busy, while there is time to summarize the translation.

A clear concept

First of all, because both words are translated as attributes in Chinese, there will be more confusion. A few other basic concepts should also be clarified here. As front-end people, we often use tags, elements, and DOM to describe HTML content, but there is a clear division. The following HTML code (skip those that clearly distinguish)

<div id="" class=""></div>
Copy the code

The tag refers to div, but there are other tags such as A, P, input, etc. Most tags are classified as

opening tags and

closing tags. ,

,

etc. Tags have additional information that we call HTML attributes, such as ID, class, collectively we call HTML elements, and an HTML document is made up of multiple HTML elements.

The Document Object Model (DOM) defines the objects and attributes of all HTML elements, as well as the methods to access them. And properties on DOM objects are called properties.

Discuss why

Attr () is a new method that handles property and attribute attributes in jQuery v1.6.1. Attr () is a new method that handles property and attribute attributes in jQuery V1.6.1. The prop() method was added, and jQuery V1.6.1 publishing logs can be seen here.

Explain in detail

When writing HTML source code, you can define attributes on HTML elements. Then, once the browser parses your code, it creates a corresponding DOM node. The node is an object and therefore has properties. Such as:

<input type="text" value="name">
Copy the code

The input element has two attributes, type and value. After the browser parses this code, it creates a HTMLInputElement object that contains a number of attributes. Such as: Accept, accessKey, align, Alt, attributes, Autofocus, baseURI, Checked, childElementCount, childNodes, childNodes, classList, The className, clientHeight, etc

Parsing the DOM node after creation object, the property is the attribute of the object, and the attribute is the object of the attributes of the object’s properties (this is in short domObj. Attibutes. Attribute).

Because you are creating DOM node objects based on HTML elements, there are many properties associated with attributes with the same or similar names, but this is not a one-to-one relationship. Such as:

<input id="inputId" type="text" value="name">
Copy the code

The DOM node object created by this element has properties such as id, Type, and Value. The ID property on a DOM node object is the ID attribute of the mapping. Getting the ID’s property is getting the attribute value, as is setting.

var inputDom = document.querySelector('#inputId')
console.log(inputDom.getAttribute('id'))
console.log(inputDom.id)
// "inputId"
// "inputId"

inputDom.setAttribute('id'.'inputId2')
console.log(inputDom.getAttribute('id'))
console.log(inputDom.id)
// "inputId2"
// "inputId2"

inputDom.id = 'inputId'
console.log(inputDom.getAttribute('id'))
console.log(inputDom.id)
// "inputId"
// "inputId"
Copy the code

The type property on the DOM node object is the attribute mapping type. The property is read by the attribute value and the property is written by the attribute value. Type is not a pure mapping property because its value can only be a known value (for example :text, submit, button, checkbox, and so on). As you can see below, property is always text when type is set to an unknown value.

var inputDom = document.querySelector('#inputId')
console.log(inputDom.getAttribute('type'))
console.log(inputDom.type)
// text
// text

inputDom.setAttribute('type'.'007')
console.log(inputDom.getAttribute('type'))
console.log(inputDom.type)
/ / 007
// text

inputDom.type = '008'
console.log(inputDom.getAttribute('type'))
console.log(inputDom.type)
/ / 008
// text
Copy the code

A value property is not an exact mapping of a value attribute. Initial state Value Property Indicates the value attribute of the mapping. When the user manually changes the content of the input box, the value property changes to the information entered by the user.

<input id="inputId" type="text" value="name">
Copy the code
var inputDom = document.querySelector('#inputId')
console.log(inputDom.getAttribute('value'))
console.log(inputDom.value)
// name
// name

inputDom.setAttribute('value'.'007')
console.log(inputDom.getAttribute('value'))
console.log(inputDom.value)
/ / 007
/ / 007

inputDom.value = '008'
console.log(inputDom.getAttribute('value'))
console.log(inputDom.value)
/ / 007
/ / 008
Copy the code

As can be seen from the above, when the user does not input data or sets the property value, the value of the input property is the value of the attribute. After the user enters a value or sets the value of the property, the value of the property is not affected by the attribute, and the value of the property is displayed in the input box on the page (figure below).

attribute

property
attribute
property
attribute
class attribute
className property
classList property

Here’s an Angular document that describes HTML attributes and DOM attributes. Web API interface reference

conclusion

In the end, HTML attributes and DOM properties are related to each other. Attribute values are mostly used as initial DOM node objects, whereas property is more used for page interaction, and many frameworks deal with property and events for elements and directives.

If the above description is wrong, welcome to correct, thank you

Reference documentation

All the documents cited above should be replaced with Chinese documents as far as possible, and the original English documents should be referred to below.

HTMLInputElement Web APIs HTML attribute vs. DOM property Stack Overflow