携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第28天，点击查看活动详情
这一小节又是一个知识普及的章节，在上一章里面，我们知道了如何设置元素属性，但是在web中，元素属性其实是分为2种的HTML Attributes 与DOM Properties,它们2个大部分时候是一一对应的，只有少数情况下没有一一对应，现在我们就来学习一下。
首先，我们通过一个input来看看
<input id='a1' type="text" />
什么是DOM Properties呢，我们可以在控制台稍微打印一下,通过js获取这个元素之后，就能看到它的属性，这些就是DOM Properties
而在html里声明的元素属性就是HTML Attributes，例如上面例子里的id="a1"。
很多人可能很疑惑，这两个有区别吗，不是一一对应吗？其实还是有的，比如class,由于es6中class是一个关键字，因此你在html里可以写<div class="a"/>,但是在js中你直接写dom.class='a'是不行的，我们得写成dom.className='a'
所以，这两个并不是一一的对应，因此哪怕我们使用setAttribute也要注意这一点,我们再看一些input的value属性。
input是一个输入型的元素，它会有一个value属性，我们现在给他新增这个属性，你会发现，
HTML Attributes 与DOM Properties发生了割裂
因此，我有一个大胆猜测：HTML Attributes设置的是DOM Properties的初始值,也就是说它们两个有一定的对应关系，但却不一定是相互响应的。一定要记住这点，这一我们才能正确的设置元素的属性。
再看一个例子，如果我们把HTML Attributes设置为错误的值会怎么样。
再次印证了之前那个猜测，并且DOM Properties是会自动矫正HTML Attributes的，当我们设置了错误的属性，它会把它改回默认值。
