H5学习(1）property&&attribute
问：
下面这段代码会带来什么问题：
<body>
<form action="">
你的爱好是：<br>
<input type="checkbox" name="items" value="篮球"/>篮球
<input type="checkbox" name="items" value="足球"/>足球
<input type="checkbox" name="items" value="乒乓球"/>乒乓球
<input type="checkbox" name="items" value="水球"/>水球
<input type="checkbox" name="items" value="玻璃球"/>玻璃球
<br>
<input type="button" id="checkAll" value="全选">
</form>
<script>
var checkAll = document.getElementById("checkAll");
checkAll.onclick = function(e){
var checkBoxes = document.getElementsByName("items");
for(i in checkBoxes){
checkBoxes[i].setAttribute('checked','checked');
}
}
</script>
</body>
1.不要混淆JS和HTML的语法
看下面的这段代码。你认为输出的结果是什么？
<input type="checkbox" checked/>
<input type="checkbox" checked=0/>
<input type="checkbox" checked=''/>
<input type="checkbox" checked=undefined/>
<input type="checkbox" checked=null/>
<input type="checkbox" checked='checked'/>
<input type="checkbox" checked=true/>
<input type="checkbox" checked=false/>
question_result.png
相应的页面结果，大家可以去试一下，所有的复选框都被选中了。
2.预定义属性和自定义属性的差别以及区别property和attribute
<input class="input" type="checkbox" checked='checked' chai="chai"/>
这里的checked属性就是预定义的属性，chai就是自定义的属性。此时的他们从HTML的角度来说只能算是attribute，只有打印出来之后，从JS的角度去看，才能有property和attribute之分。
所谓property是指：JS原生对象的直接属性。
具体的有什么区别你是否清楚呢？
我们将这个input标签打印出来看一下其中的attributes：
attrs.png
可以看到这个input上面的所有的属性都会出现在attributes中，这四个准确的说是属性节点，展开后会发现里面都会有比较重要的三个属性：
属性节点的重要属性.png
进一步观察除了chai之外的三个属性也都出现在了与attributes同级的prop之中，这只说明了一点自定义的属性不会出现在最外层的prop之中。
上面的attributes以及与之同层级的prop都属于我们通过document.getElementsByClass('input')[0]的property。
由此知道：每一个预定义的attribute都有一个property与之对应
3.attribute和property之间的相互影响
布尔值属性和非布尔值属性：若property是布尔值，那么就是布尔值属性，property是非布尔值，则是非布尔值属性。
（1）非布尔值属性
<input id='checkTest' type="checkbox" checked='checked' name='chaiCheck'/>
<script type="text/javascript">
debugger
var el = document.getElementById('checkTest')
el.setAttribute('name','setAttribute1');
el.setAttribute('name','setAttribute2');
el.setAttribute('name','setAttribute3');
el.name = 'setProp1';
el.name = 'setProp2';
el.name = 'setProp3';
el.setAttribute('name','setAttribute4');
el.setAttribute('name','setAttribute5');
el.setAttribute('name','setAttribute6');
</script>
在我们改变attribute和property时，对方是否会同步更改？
非布尔值属性结果.png
实验证明在这个过程中，不论是修改attribute还是property，彼此都会同步更新。
（2）布尔值属性
<input id='checkTest' type="checkbox" checked='checked' name='chaiCheck'/>
<script type="text/javascript">
debugger
var el = document.getElementById('checkTest')
el.setAttribute('checked','setAttribute1');
el.setAttribute('checked','setAttribute2');
el.setAttribute('checked','setAttribute3');
el.checked = false;
el.setAttribute('checked','setAttribute4');
el.setAttribute('checked','setAttribute5');
el.setAttribute('checked','setAttribute6');
</script>
看一下运行的整个过程会发现property只有在el.checked = false;这一步的时候变为false，其他时刻都没有改变，这也就意味着当修改布尔值属性的attribute时，是不会同时更改property的。
备注：下面的这段代码的执行过程的不同：
<input id='checkTest' type="checkbox" name='chaiCheck'/>
<script type="text/javascript">
debugger
var el = document.getElementById('checkTest')
el.setAttribute('checked','setAttribute1');
el.setAttribute('checked','setAttribute2');
el.setAttribute('checked','setAttribute3');
el.checked = 'setProp1';
el.checked = 'setProp2';
el.checked = 'setProp3';
el.setAttribute('checked','setAttribute4');
el.setAttribute('checked','setAttribute5');
el.setAttribute('checked','setAttribute6');
</script>
若一开始就没有为checked赋值,那么在第一次setAttribute的时候，property会同步更新为true.
上面几个例子，请详细在控制台查看运行的过程。
结论：
非布尔值属性：attribute和property会相互同步
布尔值属性：<1>改变property不会影响attribute.<2>没有动过property时，修改attribute会影响property，动过property后，修改attribute不再对property有影响。
4.浏览器究竟是认attribute还是property
这里可以由你们自己去做实验，我这边给出结论：不管是浏览器还是用户在界面上面的操作，都是针对的property。
END
至此，你是否可以对文章开头的那段代码提出质疑，并给出理由了？
有任何问题，欢迎留言！也欢迎各位同学点个赞哦！！
