JS中attr和prop属性的区别

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JS中attr和prop属性的区别相关的知识,希望对你有一定的参考价值。

JS中attr和prop属性的区别如下:
1、attr是attribute的缩写,是一个特性节点,每个DOM元素都有一个对应的attributes属性来存放所有的attribute节点,attributes是一个类数组的容器,说得准确点就是NameNodeMap,总之就是一个类似数组但又和数组不太一样的容器。attributes的每个数字索引以名值对(name=”value”)的形式存放了一个attribute节点。
<div class="box" id="box" gameid="880">hello</div>
上面的div元素的HTML代码中有class、id还有自定义的gameid,这些特性都存放在attributes中,类似下面的形式:
[ class="box", id="box", gameid="880" ]
可以这样来访问attribute节点:
var elem = document.getElementById( \'box\' );
console.log( elem.attributes[0].name ); // class
console.log( elem.attributes[0].value ); // box
2、与之对应的property属性,比较特殊的是一些值为Boolean类型的property,如一些表单元素:
<input type="radio" checked="checked" id="raido">
var radio = document.getElementById( \'radio\' );
console.log( radio.getAttribute(\'checked\') ); // checked
console.log( radio.checked ); // true
对于这些特殊的attribute节点,只有存在该节点,对应的property的值就为true,如:
<input type="radio" checked="anything" id="raido">
var radio = document.getElementById( \'radio\' );
console.log( radio.getAttribute(\'checked\') ); // anything
console.log( radio.checked ); // true
3、了更好的区分attribute和property,基本可以总结为attribute节点都是在HTML代码中可见的,而property只是一个普通的名值对属性。
参考技术A

 window或document中使用.attr()方法在jQuery1.6中不能正常运行,因为window和document中不能有attributes。它们包含properties(比如:location或readyState),必须使用.prop()方法操作或简单地使用javascript原生的方法。 在jQuery1.6.1中,window和document中使用.attr()将被自动转成使用.prop(还没试过)。其次,checked,selected和前面提到的其它boolean attributes,因为这些attributes和其相应的properties之间的特殊关系而被特殊对待。通常,attribute 就是以下html代码中看到的,如:


             <input type=”checkbox” checked=”checked”>


  但它仅表示checked属性在页面加载的时候被设置成默认值或初始值,而不管checkbox元素是否被选中。 而通常 properties 是一个浏览器用来记录当前属性值的东西。正常情况下,properties反映它们相应的attributes。


  所以,当用户点击一个checkbox元素或选中一个select元素的一个option时,使得properties保持最新,但对应的attributes却不一定,它仅被浏览器用来保存该属性的初始值。

 一个例子:

<input type="radio" id="RdMale" checked="checked" name="sex" value="male" /><label for="hRdMale">男</label>
<input type="radio" id="RdFemale" name="sex" value="female" /><label for="hRdFemale">女</label>
<button id="reSet">重置</button>

jQ代码

$("#reSet").click(function() 
  $("input[name='sex']:first").attr("checked",true);
);

但这样写火狐浏览器不支持,
添加属性名称该属性就会生效应该使用.prop()

$("input[name='sex']:first").prop("checked",true); //改成prop就成功了

   区别在于selectedIndex, tagName, nodeName, nodeType, ownerDocument, defaultChecked, 以及defaultSelected 等属性需用.prop()方法。  添加属性名称该属性就会生效应该使用.prop()

本回答被提问者采纳

jQuery中prop方法和attr方法区别

attr方法用的是原生js中的getAttribute和setAttribute;

prop方法相当于直接用.或者[]来访问/修改dom元素的属性,

所以它俩的区别相当于问原生js中的getAttribute和直接.来修改属性有什么区别:

 

<input type="text" zs="user">

1.在html中能看到的属性一定会在dom的属性节点中保存,本文称它为节点属性, 这些属性分为html自带的属性(如type),和自定义属性(如zs). 

 元素还有很多属性是html中看不到的, 如offsetLeft, clientTop等,它们保存在元素对象中,是普通属性,不是节点属性.

普通属性节点属性独立的,可以同名而不冲突.

 1.1. 直接.或者[]只能获取元素的普通属性

1.2.  getAttribute方法只能获取节点属性.

 

2.如果不在html写好属性, 而用js设置属性, 也有两种方式: 直接.设置和使用setAttribute方法:

2.1.用.或[]设置

     2.1.1 对于html中标签本身自带的属性(如img标签的src属性, a标签的href属性等),会设置成节点属性,在html中看得见.

              但如果不是html中标签自带的,而是自定义属性, 则这些属性会成为普通属性, 在html中看不见,但我们一般不希望这样.

2.2.  用setAttribute设置

      2.2.1 无论是不是html自带的属性, 都会被设置成节点属性,在html中看得见.

 

对于html自带的布尔属性,如checked, disabled等, 直接.或[]才能得到true/false真实的布尔值, 用jQuery的prop方法也是一样;

但是attr方法不能正常得到布尔属性的布尔值,它返回的是属性名,也就是attr("checked") = "checked", 所以操作布尔属性要用prop方法;

 

总结: 一般来说,我们自定义的属性希望能在html中也能看得见, 所以对于非html自带的属性, 用attr方法操作;

          对于html自带的属性,尤其是布尔属性, 要用prop方法操作.

 

以上是关于JS中attr和prop属性的区别的主要内容,如果未能解决你的问题,请参考以下文章

JS中attr和prop属性的区别

关于获取HTML元素属性的prop()和attr()的区别

jQuery中prop方法和attr方法区别

稳固而窒息 jquery attr 和 Prop的区别

jQuery函数attr()和prop()的区别

jq中.prop()与attr()的区别