DOM中的attributes与property

• attributes是DOM对象的一个属性，里面存放了html中自定义与预定义属性（属性节点）

<input type="checkbox" checked="checked" zidingyi="zidingyi"/>    //type、checked与zidingyi的属性与值都以字符串形式存储在DOM对象的attributes中

• property并不是说"property"在DOM中，而是DOM对象的属性，确切的说attributes其实也是DOM的一个属性

//还是上面的代码，除了DOM对象中本身自带的属性外，html中预定义属性会以属性的形式加入到DOM对象中
//此时DOM中除了其他本身的属性，还额外存在type="checkbox"、checked=true、id=""等等
<input type="checkbox" checked="checked" zidingyi="zidingyi"/>

一个问题

弄清楚attributes与property区别后，需要知道，为什么在property中对checked进行了隐式的转换

• html预定义熟悉分为布尔属性与非布尔属性
• 在property中会对布尔属性进行转换，其值只能是true/false

谁是真身？

显然枯燥的理论显得对两者的区分显得无聊，我们真正关注的是：我们更改上面勾选框状态时，浏览器到底进行了什么

• 结论是：浏览器只会以property中该属性进行判断

//同样的代码
<input type="checkbox" checked="checked" zidingyi="zidingyi"/>
//当我们在浏览器中点击进行勾选时，更改的是property

细节

实际上，在jQuery中，jQuery对象有attr()和prop()两个方法，在使用attr()时，我们会发现一个有趣的现象

//思考以下代码
$(() => {
            $('button').click(() => {
                $('input').attr('checked', true)
            })
        })

<input type="checkbox" zidingyi="zidingyi" />
<button>btn</button>

我们会惊奇的发现，当点击按钮后的确选上了，可是手动取消选中状态后，按钮像是失效了一样

解密

在试验后我发现，attributes中的属性和property有一种微妙的关系，其表现为：

• 对非布尔属性而言，改变其中任意一个，另外一个都会相应的改变成相同的值
• 对布尔属性而言
  • 直接改变property在attributes中未有的属性，不会对原有attributes有改变，直接改变property在attributes中已有的属性，也不会对原有attributes有改变
  • 即property的改变不会改变attributes中属性
  • 出现上面代码导致的情况原因是，在从未更改过property时，更改attributes中的属性，会导致prototype属性同步更改
  • 一旦property更改后，更改attributes不会对property有影响

怎么做

在了解规律后，对于开发者来说，是不是应该全面禁止更改attributes预防不良影响呢？
答案是否定的，对于非布尔熟悉使用更改attributes的方式能够在一定程度上提升效率，详见官方建议：

以上结果为chrome 81.0.4044.122测试情况，如有错误，欢迎指正！