Attribute 和 Property 区别

attribute 是我们在 html 代码中经常看到的键值对, 例如:

<input id="the-input" type="text" value="Name" />

上面代码中的 input 节点有三个 attribute:

• id : the-input
• type : text
• value : Name

property 是 attribute 对应的 DOM 节点的 对象属性 (Object field), 例如:

HTMLInputElement.id === 'the-input'
HTMLInputElement.type === 'text'
HTMLInputElement.value === 'Name'

attribute 更倾向于不可变更的

property 更倾向于在其生命周期中是可变的

attribute 指的是dom属性，property 指的是对象属性，相互关键却不一定相等。

prop的一部分属性通过set关联attr。
attr属性修改时通过事件更新prop。

如a标签的href属性，在attr里可以不写http和其他前缀，还可以用相对路径，但是在prop里就会自动转换成绝对路径，然后修改prop时，attr会同步修改，且值和prop完全相同。修改attr时，不论attr设置的是什么，prop始终都会更新为绝对路径。

attr和prop怎么选择？

对于HTML元素自带的固有属性，在处理时，使用prop方法。快速，准确。

对于HTML元素我们自定义的DOM属性，在处理时，使用attr方法。

例子

<input id="password1" type="checkbox" />记住密码
<input id="password2" type="checkbox" checked="checked" />记住密码

像checkbox，radio和select这样的元素，选中属性对应“checked”和“selected”，这些属于固有属性，因此需要使用prop方法去操作才能获得正确的结果。如果没有相应的属性，attr()函数返回值是 undefined。

$("#password1").prop("checked");// false
$("#password2").prop("checked");// true
 
$("#password1").attr("checked"); //undefined
$("#password2").attr("checked"); //"checked"

对与具有 true 和 false 两个属性的属性，如 checked, selected 或者 disabled 使用prop()