html 标签属性（attribute/property） 布尔/非布尔属性 attribute/property 同步

attribute/property

html 标签的预定义和自定义属性统一称为 attribute
attribute 标签属性 type

 <input type="checkbox" name="input-name"/>

property js原始对象的直接属性

const obj = {
	name:"property  属性"
}

布尔/非布尔属性

标签对象的 property 是布尔值 该属性就是布尔值属性
标签对象的 property 不是布尔值 该属性就是非布尔值属性

布尔属性 在 html5 可以简写 <input type="checkbox" checked/>

attribute property 同步关系

非布尔值属性

实时同步
不管什么情况 property和attribute同步

布尔值属性

1. 改变 property不会同步 attribute
2. 在没有动过property时（没有设置该属性,就不会设置input.checked = true）
   attribute 会同步property
3. 一旦动过property时
   attribute 不会同步property

改变property

// 直接赋值 
input.checked = true
// 标签添加该属性
 <input type="checkbox" checked />

改变attribute

input.setAttribute('checked',"checked") 

property 优先级高于 attribute

用户操作的是property
浏览器认同 property

let input = document.querySelector('input')
console.dir(input)

通过setAttribute 设置属性

// 设置布尔值属性
// 查看 input.attributes.name.nodeValue  => 'null'
// 实际设置的值是 'null'
input.setAttribute('checked',null)  //设置选中

// 设置非布尔值属性
input.setAttribute('name',"input-name-setAttribute")  
// 会同时修改 
// input.attributes.name.nodeValue
// input.name

通过 property 设置属性

// 设置布尔值属性
input.checked = false  // 取消选中  

// 设置非布尔值属性
input.name = "input-name-property"  
// 会同时修改 
// input.name
// input.attributes.name.nodeValue

实现效果数 没有选中 name = “input-name-property”