Detailed explanation of the difference between prop and attr in js

This article mainly focuses on attr obtaining the element value from page search, so the page must clearly define the element to obtain the value, which is relatively slow.
For example:

<input name=&#39;test&#39; type=&#39;checkbox&#39;> 
$(&#39;input:checkbox&#39;).attr(&#39;type&#39;); 返回checkbox. 
$(&#39;input:checkbox&#39;).attr(&#39;checked&#39;); 返回undefined。

Because there is no checked keyword in <input name="test" type="checkbox">.

• prop takes the value from the attribute object. You can get as many values ​​as there are attributes in the attribute object. There is no need to display the definition on the page.
  For example
  

##

$('input:checkbox').prop('checked'); 返回false
。

You will encounter a problem here:

If it is a custom attribute, Then there is no such attribute in the attribute object. So prop returns undefined. But this attribute can be retrieved from the page, so attr can be obtained.

Secondly

• attr obtains the initialization value. Unless it is changed by attr(‘name’,’value’), the value will not change. The prop attribute value is dynamic, such as checkbox. After it is selected, checked becomes true, and the prop value will also change.

Summary

So there is an experience:

• For the inherent attributes of the HTML element itself, when processing When, use the prop method. Fast and accurate.

• For our own customized DOM attributes of HTML elements, we use the attr method when processing them.

The above description may be a bit vague, just give a few examples.

<a id="first" href="#" target="_self">超链接</a>

In this example, the DOM attributes of the a> element include id, href, and target. These attributes are attributes of the a> element itself. , these attributes are included in the W3C standard, or attributes that can be intelligently prompted in the IDE. These are called inherent attributes. When dealing with these properties, it is recommended to use prop.

<a id="first" href="#" target="_self" uuu="guoguo">超链接</a>

In this example, the DOM attributes of the a> element include id, href, target, and uuu. The first three are inherent attributes, and the last "uuu" attribute allows us to customize it. Yes, the a> element itself does not have this attribute. This is a custom DOM attribute. When dealing with these attributes, it is recommended to use attr. Read the inherent attributes of HTML elements (assigned)

<a href="#" target="_self">超链接</a>
//attr和prop都读取成功
//attr("href")的值是：#//prop("href")的值是：http://localhost:4590/AttributeHandle/Index#alert($("a").attr("href"));alert($("a").prop("href"));

• 
  

Read the inherent attributes of HTML elements (Unassigned)

The inherent attributes of different HTML tags are not exactly the same. For example: the checked attribute is an inherent attribute of the checkbox tag, but not the inherent attribute of the a tag. Although the class attribute is an inherent attribute of the a tag, if the attribute is not assigned a value in the element, it cannot be read using attr().

<a href="#" target="_self">超链接</a>
<input type="checkbox" id="testCheckBox" value="测试CheckBox"/>
alert($("a").attr("id"));//输出：undefine
alert($("a").prop("id"));//输出：默认值""alert($("a").attr("checked"));//输出：undefine
alert($("a").prop("checked"));//输出：undefine
alert($("#testCheckBox").attr("checked"));//输出：undefine
alert($("#testCheckBox").prop("checked"));//输出：默认值falsealert($("a").attr("class"));//输出：undefine
alert($("a").prop("class"));//输出：默认值""

读取HTML元素自定义属性（已赋值）

<a href="#" target="_self" uuu="guoguo">超链接</a>
alert($("a").attr("uuu"));//输出：guoguoalert($("a").prop("uuu"));//输出：undefine

读取HTML元素自定义属性（未赋值）

<a href="#" target="_self" uuu="guoguo">超链接</a>
alert($("a").attr("abc"));//输出：undefinealert($("a").prop("abc"));//输出：undefine

设置HTML元素固有属性

<a href="#" target="_self" uuu="guoguo">超链接</a>
$("a").attr("id","link");//id属性添加成功$("a").prop("id","link");//id属性添加成功

设置HTML元素自定义属性

<a href="#" target="_self" uuu="guoguo">超链接</a>$("a").attr("abc", "myself");//成功添加属性abc="myself"$("a").prop("abc", "myself");//添加abc属性失败$("a").attr("action", "addAttribute");//成功添加属性action="addAttribute"$("a").prop("action", "addAttribute");//添加action属性失败

总结

prop读取属性值：读取已赋值的固有属性会得到属性值，读取未赋值的固有属性会得到属性默认值，读取自定义属性时无论是否赋值均得到undefine。 
prop设置属性值：prop只能设置固有属性值。 
attr读取属性值：无论是固有属性还是自定义属性，attr只能读取元素中已有的属性值，读取元素中没有的属性值会返回undefine。 
attr设置属性值：attr可以对任意属性设置属性值。

The above is the detailed content of Detailed explanation of the difference between prop and attr in js. For more information, please follow other related articles on the PHP Chinese website!