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

时间:2024-10-01 08:07:25
  1. Attribute(属性) 和 Property(特性)
    1. Attribute(元素节点的属性),例如html中常用的class、title、align等(即:属性节点).而Property 是这个DOM元素作为对象的属性,例如 childNodes、firstChild等(即:特性):
      通过 谷歌开发者工具 查看:
      【原创】01-1. 基于 checked 关于 attribute 和 property 的理解
    2. 问题引入:
      【原创】01-1. 基于 checked 关于 attribute 和 property 的理解
    3. 很多'attribute属性' 都有一个与之对应的 'property特性':即 "特性value" 和 "属性value"  是对应的,所以添加了value 特性 审查元素可以 看到的"value属性节点". (注意:‘class属性节点’对应的特性名 是:className,因为class 是 js 的保留字。)
    4. 需要注意的是:对于‘特性checked’(property)不是对应它 'checked属性'(attribute), 'checked属性'  实际对应的是‘特性defaultChecked';
      类似的还有:<input type="text" value="" />中,value属性节点 对应的是:defaultValue,实际手动往输入框内输入的内容,是与 value特性 相对应的。
      【原创】01-1. 基于 checked 关于 attribute 和 property 的理解
      此时可以 显示出来了。defaultChecked 作用:设置复选框初始化的值,如下:
      【原创】01-1. 基于 checked 关于 attribute 和 property 的理解
      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);
    5. 对于一个checkbox,若未定义checked="checked",alert($(element).attr("checked")) 的结果是undefined。若已定义则结果是checked。
    6. PS:在这里的getAttribute方法有一个潜规则,部分属性(input 的 value和checked)通过 getAttribut 始终取到的是初始值
  2. ss