JS中attr和prop属性的区别
2016-08-12 · 百度知道合伙人官方认证企业
育知同创教育
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只是一个普通的名值对属性。
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()
