【原创】01-1. 基于 checked 关于 attribute 和 property 的理解

Attribute(属性) 和 Property(特性)

Attribute(元素节点的属性),例如html中常用的class、title、align等（即：属性节点）.而Property 是这个DOM元素作为对象的属性,例如 childNodes、firstChild等(即：特性):
通过 谷歌开发者工具 查看：
问题引入：
很多'attribute属性' 都有一个与之对应的 'property特性'：即 "特性value" 和 "属性value" 是对应的，所以添加了value 特性审查元素可以看到的"value属性节点". (注意：‘class属性节点’对应的特性名是：className，因为class 是 js 的保留字。)
需要注意的是：对于‘特性checked’（property）不是对应它 'checked属性'（attribute）， 'checked属性' 实际对应的是‘特性defaultChecked';
类似的还有：<input type="text" value="" />中，value属性节点 对应的是：defaultValue，实际手动往输入框内输入的内容，是与 value特性 相对应的。

此时可以显示出来了。defaultChecked 作用：设置复选框初始化的值，如下：

checked 对应的‘property(defaultChecked)’不会因为复选框的状态而改变，而checked 的‘property(checked)’才是与复选框的选中状态保持动态改变的。
所以在.attr()函数中，就算属性节点设置成了.attr("checked",true)，也只是用来存储默认或者选中属性的初始默认值，却并不改变该复选框被选中和选中。
这也就是为什么checkbox标签已有 checked=checked属性节点，却没显示勾选的原因所在！！因为该属性节点的显示是由‘ property(defaultChecked)’决定的。而实际是否选中 状态是与 ‘property(checked)’有关。
<input type="checkbox"/> // JS 给复选框的“checked”属性赋值，直接 xxx.checked=true; 或 $(element).prop("checked",ture);
对于一个checkbox，若未定义checked="checked"，alert($(element).attr("checked")) 的结果是undefined。若已定义则结果是checked。
PS:在这里的getAttribute方法有一个潜规则，部分属性（input 的 value和checked）通过 getAttribut 始终取到的是初始值。

巴特西

【原创】01-1. 基于 checked 关于 attribute 和 property 的理解

最新文章

热门文章