jquery Learning Note: 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. Gets the attribute of the first element in the matching element collection, or adds one to multiple attribute for each 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 m atched element. Gets the property of the first element in a matching element collection, or adds one to multiple properties for each selected element
It can be observed that the function between the two is very similar, except that the objects of the two operations are different.
In this way, we narrow the problem down to the difference between the attribute and the property.

attribute and propery all have attribute meaning, in order to differentiate, we agree to name attribute as attribute , Name property as attribute

First, attribute.

In JavaScript, there is getattribute (), which is specifically used to get the attribute values of a node.
The attribute value of the node, we refer to the value of SRC in

    <script type= ' text/javascript ' >        var image = document.getElementById (' Test ');        Console.log (Image.getattribute (' src '));    </script>  

and setattribute () to set the property value of the node.

    <script type= ' text/javascript ' >        var image = document.getElementById (' Test ');        Image.setattribute (' src ', ' another.jpg ');    </script>  

As you can see, the value of the node's property has changed. The property value that is set by setattribute changes the attribute value of the node.
The function of attr () is to combine getattribute () and Setattribut () in JavaScript to manipulate the object that is the attribute value of the node.

Again property

property is the attribute of a DOM element, the same way you would normally use an object, by which you can get the attribute value of an object, or by an object. Attribute = attribute value to set the object's attribute value.

    <script type= ' text/javascript ' >        var image = document.getElementById (' Test ');        Console.log (IMAGE.SRC);    </script> 

You can see that the attribute values of the DOM element are obtained. Although it is the same as the content of the attribute value of the node, there is a difference in form.
And look at setting DOM element attribute values:

    <script type= ' text/javascript ' >        var image = document.getElementById (' Test ');        Image.src= ' another.jpg ';    </script>  

It is found that the attribute values of the DOM element are changed, and the property values of the node elements change as they occur. Then through the GetAttribute () method, see if you can get the characteristic value just set.

    <script type= ' text/javascript ' >        var image = document.getElementById (' Test ');        Image.src= ' another.jpg ';        Console.log (Img.getattribute (' src '));    </script>   

The property values of the elements are changed as well, as the attribute values of the DOM are changed.

Is it said that the attribute is the same as the property?

In fact, the real situation is that attribute and property refer to the same data source.

1. In the build-in attribute, attribute and property share data, attribute changes the property, and vice versa, but the custom properties of both are independent data, even if name does not affect each other, it looks like this picture , but IE6 and 7 do not differentiate, and the custom attribute data is still shared.

2. Not all attribute are consistent with the corresponding property name. For example, the class in attribute, the corresponding name in the property is classname.

3. For value is True/false property, similar to input checked, etc., attribute obtained value is the value inside the HTML document (checked), the property is to obtain the result of the calculation (True/false), Property changes do not affect attribute literals, but attribute changes can affect property calculations.

4. For some of the path-related properties, the values are also different, but the same attribute obtained is the literal, the property obtained is the full path after the calculation, as in the example above, the return value of SRC.

How to choose

In general, use Prop () for built-in properties, use attr () for custom properties, and refer to the table below for additional parameters.

jquery Learning Note: The difference between attr () and prop ()