论坛首页 Web前端技术论坛

element节点的attribute和property初探

浏览 2435 次
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
作者 正文
   发表时间:2013-01-30  
最近在用jquery的时候,发现$('input[checked="checked"]')有时候不能正确的选择被勾选的checkbox.
所以调查了一下

在javascript里,任何一个obj都有property,并且可以任意添加
			var o=new Object();
			o.name='crap';
			alert(typeof(o.name));

显示是个string

对于element元素,有个readonly的property,叫做attributes,这是个NamedNodeMap.
http://www.w3schools.com/dom/prop_element_attributes.asp
http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-745549614
element元素可以通过getAttribute,setAttribute来操作attributes这个NamedNodeMap里的内容
以下内容是在火狐18.0.1演示的.

		<script type="text/javascript">
			function crap() {
				var item = document.getElementById("key");
				alert(item.type);
				alert(item.getAttribute('type'));
			}
		</script>
		<input type="text" id="key">
		<button onclick="crap()">button</button>

看到输出都是text,因为item.type这个属性是由它的html attributes暴露的
http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-642250288

				var item = document.getElementById("key");
				alert(item.type);
				item.setAttribute('type','checkbox');
				alert(item.type);

输出分别是text,checkbox,因为item.setAttribute('type','checkbox')更改了item.type属性

把代码改成如下
		<script type="text/javascript">
			function crap() {
				var item = document.getElementById("key");
				alert(item.checked);
				alert(item.getAttribute('checked'));
			}
		</script>
		<input type="checkbox" id="key">
		<button onclick="crap()">button</button>

在checkbox没选中的情况下,输出分别为false,null
鼠标勾选以后,是true,null

IE7中分别是false,false
true,true

看来火狐没有进行setAttribute

我猜测这就是jquery中input[checked='checked'] selector有时候不能选中被勾选的元素的原因,
要用:checked这个选择器.

不过换句话说,一个checkbox元素e被勾选以后,它到底应该e.checked=true才对,
还是e.setAttribute('checked','checked')?

规范说
引用

The attributes are exposed as properties for compatibility with DOM Level 0.
This usage is deprecated because it can not be generalized to all possible attribute names for XML.
We recommend the use of generic methods on the core Element interface for setting, getting and removing attributes.

那岂不是火狐应该setAttribute('checked','checked')?
   发表时间:2013-01-30  
jquery新增了prop()方法
http://api.jquery.com/prop/
文档上写了prop
attr()中的介绍
http://api.jquery.com/attr/
As of jQuery 1.6, the .attr() method returns undefined for attributes that have not been set. In addition, .attr() should not be used on plain objects, arrays, the window, or the document. To retrieve and change DOM properties, use the .prop() method.

请注意jquery的升级
0 请登录后投票
   发表时间:2013-02-05  
$("input").find(":checkbox")
然后each循环就得了 里面去判断 $(this).attr("checked")==true
0 请登录后投票
论坛首页 Web前端技术版

跳转论坛:
Global site tag (gtag.js) - Google Analytics