js中的attribute与property关系

原文链接：https://blog.csdn.net/zhy13087344578/article/details/79036967

一、研究两者之间关系的出发点（功能需求）

        研究attribute与property区别，目的是想在修改标签样式的时候能够实现想要的效果，例如使用attribute可新增标签的特性setAttribute('style','background:red;')。

二、修改attibute、property值的方法（针对标签中已存在的属性）

        使用'标签名称.setAttribute(属性名称，修改的属性值)'时，相应的property的值也会改变（使用标签名称.属性名称获取property的值）；

        使用'标签名称.属性名称=修改的属性值'时，相应的attribute的值也会改变（使用标签名称.getAttribute('属性名称')获取attribute的值）

        对于class、id、name等属性（一般属性），无论是attribute还是property中的哪一方面发生改变，都会互相影响。

        需要注意：对于已有的class、id、name等属性，无论是attribute还是property中的哪一方面发生改变，都会互相影响；而对于新增的属性，无论是attribute还是property中的哪一方面新增，都不会影响到另一方。

三、hidden属性（特殊属性）
    1、当标签中有hidden=xxx时且不为null，则property中的hidden=true,元素能够隐藏。
    2、当attribute中移除hidden，attribute中的hidden值变为null，即removeAttribute('hidden')时property中的hidden=false，元素会显示；当property中的hidden=false时，attribute中的hidden值变为null，元素会显示。
        总结来说，property中的hidden=true，元素就隐藏，property中的hidden=false，元素就显示；attribute中的hidden不为null，元素就隐藏，attribute中的hidden为null，元素就显示。

四、知识点

1、properties下包含'property'和'attributies',attributies下包含attribute。
2、attribute是标签特性，可以自定义，方法有两种：①直接在标签上添加；②使用setAttribute添加，这两种情况下添加的都是attribute。
3、property的修改是使用xx.属性名称进行的。
4、某个已存在的属性（既有attribute又有property）在attribute或property中的任一方修改时，都会影响到另一方（互相影响）；而非默认后添加的属性修改时，不会影响到另一方（互相无影响）
5、一些特殊属性，需要特殊对待，也就是说有与上面规则不同的情况存在。