H5学习(1）property&&attribute

问：

下面这段代码会带来什么问题：

    

        你的爱好是：

        篮球
        足球
        乒乓球
        水球
        玻璃球
        

        
    
    

1.不要混淆JS和HTML的语法

看下面的这段代码。你认为输出的结果是什么？

HTML会将看到的这些值都转化为字符串：

question_result.png

相应的页面结果，大家可以去试一下，所有的复选框都被选中了。

2.预定义属性和自定义属性的差别以及区别property和attribute

这里的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）非布尔值属性

在我们改变attribute和property时，对方是否会同步更改？

非布尔值属性结果.png

实验证明在这个过程中，不论是修改attribute还是property，彼此都会同步更新。

（2）布尔值属性

看一下运行的整个过程会发现property只有在el.checked = false;这一步的时候变为false，其他时刻都没有改变，这也就意味着当修改布尔值属性的attribute时，是不会同时更改property的。

备注：下面的这段代码的执行过程的不同：

若一开始就没有为checked赋值,那么在第一次setAttribute的时候，property会同步更新为true.

上面几个例子，请详细在控制台查看运行的过程。

结论：

非布尔值属性：attribute和property会相互同步

布尔值属性：<1>改变property不会影响attribute.<2>没有动过property时，修改attribute会影响property，动过property后，修改attribute不再对property有影响。

4.浏览器究竟是认attribute还是property

这里可以由你们自己去做实验，我这边给出结论：不管是浏览器还是用户在界面上面的操作，都是针对的property。

END

至此，你是否可以对文章开头的那段代码提出质疑，并给出理由了？

有任何问题，欢迎留言！也欢迎各位同学点个赞哦！！