jQuery: The difference between attr() and prop()

attr()

Get the value of an attribute for the first element in the set of matched elements or set one or more attributes for every matched element.
Get the attribute of the first element in the set of matched elements, or set one or more attributes for every matched element. Add one or more attributes to a selected element

prop()

Get the value of a property for the first element in the set of matched elements or set one or more properties for every matched element.
Get the set of matched elements The property of the first element in the element, or add one or more properties to each selected element

It can be observed that the functions between the two are very similar, but the objects they operate on are different.

In this way, we reduce the problem to the difference between attribute and property.

Attribute and property both mean attributes. In order to distinguish them, we agree to name attribute as attribute and property as property. Let’s talk about attribute first. In javascript, there is getAttribute(), which is specially used to obtain the attributes of nodes. value.

The attribute value of the node, we refer to the value of src in

<img  src="/static/imghwm/default1.png"  data-src="https://img.php.cn//upload/image/700/563/134/1479446005532065.png?x-oss-process=image/resize,p_40"  class="lazy"  id=&#39;test&#39; src=&#39;test.jpg&#39; alt="jQuery: The difference between attr() and prop()" >
    <script type=&#39;text/javascript&#39;>
        var image = document.getElementById(&#39;test&#39;);
        console.log(image.getAttribute(&#39;src&#39;));
    </script>

and setAttribute(), which sets the attribute value of the node.

<img  src="/static/imghwm/default1.png"  data-src="https://img.php.cn//upload/image/700/563/134/1479446005532065.png?x-oss-process=image/resize,p_40"  class="lazy"  id=&#39;test&#39; src=&#39;test.jpg&#39; alt="jQuery: The difference between attr() and prop()" >
    <script type=&#39;text/javascript&#39;>
        var image = document.getElementById(&#39;test&#39;);
        image.setAttribute(&#39;src&#39;, &#39;another.jpg&#39;);
    </script>

You can see that the attribute value of the node has changed. The attribute value set by setAttribute changes the attribute value of the node. The function of

attr() is to combine getAttribute() and setAttribut() in JavaScript. The object of operation is the attribute value of the node.

Let’s talk about property

Property is the property of DOM elements. It is the same as the usual way of using objects. You can get the property value of the object through object.property, or you can set the property value of the object through the method of object.property=property value. .

<img  src="/static/imghwm/default1.png"  data-src="https://img.php.cn//upload/image/700/563/134/1479446005532065.png?x-oss-process=image/resize,p_40"  class="lazy"  id=&#39;test&#39; src=&#39;test.jpg&#39; alt="jQuery: The difference between attr() and prop()" >
    <script type=&#39;text/javascript&#39;>
        var image = document.getElementById(&#39;test&#39;);
        console.log(image.src);
    </script>

You can see that the characteristic value of the DOM element has been obtained. Although it refers to the same content as the attribute value of the node, there is still a difference in form.

Look at setting the attribute value of the DOM element again:

<img  src="/static/imghwm/default1.png"  data-src="https://img.php.cn//upload/image/700/563/134/1479446005532065.png?x-oss-process=image/resize,p_40"  class="lazy"  id=&#39;test&#39; src=&#39;test.jpg&#39; alt="jQuery: The difference between attr() and prop()" >
    <script type=&#39;text/javascript&#39;>
        var image = document.getElementById(&#39;test&#39;);
        image.src=&#39;another.jpg&#39;;
    </script>

found that after changing the attribute value of the DOM element, the attribute value of the node element also changed. Then use the getAttribute() method to see if the attribute value just set can be obtained.

<img  src="/static/imghwm/default1.png"  data-src="https://img.php.cn//upload/image/700/563/134/1479446005532065.png?x-oss-process=image/resize,p_40"  class="lazy"  id=&#39;test&#39; src=&#39;test.jpg&#39; alt="jQuery: The difference between attr() and prop()" >
    <script type=&#39;text/javascript&#39;>
        var image = document.getElementById(&#39;test&#39;);
        image.src=&#39;another.jpg&#39;;
        console.log(img.getAttribute(&#39;src&#39;));
    </script>

Confirms that changing the property value of the DOM will also change the attribute value of the element.

Could it be said that attribute and property are the same?

In fact, this is not necessarily the case. The real situation is that attribute and property refer to the same data source.

1. Regarding the build-in attribute, attribute and property share data. If the attribute is changed, it will affect the property, and vice versa. However, the custom attributes of the two are independent data. Even if the names are the same, they will not affect each other. It looks like the picture below, but IE6 and 7 do not differentiate and still share custom attribute data.

2. Not all attributes are consistent with the corresponding property names. For example, the class in attribute has the corresponding name in property is className.

3. For properties whose values ​​are true/false, similar to input's checked, etc., the value obtained by the attribute is the value in the HTML document (checked), and the property obtains the calculation result (true/false). Changes in the property do not affect the attribute Literal value, but attribute changes will affect property calculation.

4. For some path-related attributes, the values ​​obtained by the two are different, but similarly, the attribute obtained is a literal value, and the property obtained is the calculated complete path, just like the return value of src in the above example.

How to choose

Generally speaking, use prop() for built-in attributes and attr() for custom attributes. For other parameters, please refer to the table below.