HTML中的attribute属性和JavaScript中的property属性的详解以及区别

一直没有搞懂attribute和property的区别，弄了个例子，总结了一下。

一、基本概念区别

        attribute：是HTML标签上的某个属性，如id、class、value等以及自定义属性，它的值只能是字符串，关于这个属性一共有三个相关的方法，setAttribute、getAttribute、removeAttribute；

        注意：在使用setAttribute的时候，该函数一定接收两个参数，setAttribute（attributeName,value）,无论value的值是什么类型都会编译为字符串类型。在html标签中添加属性，本质上是跟在标签里面写属性时一样的，所以属性值最终都会编译为字符串类型。

        property：是js获取的DOM对象上的属性值，比如a，你可以将它看作为一个基本的js对象。这个节点包括很多property，比如value，className以及一些方法onclik等方法。如图：

说明图

        从上图中我们可以看出，一个js对象有很多property，该集合名字为properties，properties里面有其他property以及attributies，attributies里面有很多attribute。而常用的attribute，id、class、name等一般都会作为property附加到js对象上，可以和property一样取值、赋值。

二、差异

1、value属性

我们先来测试一遍：html

输出结果

        浏览器渲染是这样的

浏览器渲染

        没有错对不对，但是当我在input输入框中输入值的时候

浏览器渲染

        我再接着刚刚利用console.log输出

输出结果

        发现，只有property属性的value值是输入的值，attribute属性的value值依旧没有变，并且当我使用age.value=’45’的时候，再次获取attribute的值也并没有发送变化。那么，我改变attribute的值呢？property会不会改变呢？答案是不会，测试结果如下：

输出结果

        总个小结：attribute的value值只在初始化的时候跟property一样，使用getAttribute获取的值是初始化时候的值，如果没有设置则是”，除非使用setAttribute方法手动去改变，但是这个改变也不会影响property的值；property的value值是input实时输入的值，该值的改变同样也不影响attribute。

三、name.id,class等属性

        html

        输出结果

输出结果

    从上面可以看出，attribute和property的值都一样，那我们去改变呢，使用setAattribute：

输出结果

        发现，当使用setAttribute去改变它的属性值时，再去获取property获取相对于的，也会发生改变，那么我们再来测试，当使用property去改变值，那么attribute所对应的值会不会改变（注：可能在js里面class是保留字，所以使用property去获取class值时，使用的是className）

输出结果1

输出结果2

输出结果3

        在更改id的时候自所以或报错，就说明id已经改了，再使用原来的id获取不到该节点了。

        总个小结：对于class、id、name、等属性，无论哪一方面发生改变，都会互相影响。

四、对于新增加的属性

        当property增加新属性

输出结果

        当attribute增加新属性

输出结果

        总个小结：对于新增的属性，都不会影响到其他一方。

五、hidden、disabled等属性

输出结果

总个小结：

        1、attribute的hidden属性会影响property属性的hidden；

        2、只要attribute的hidden不为null（当在html标签中写hidden 或者 hidden=xxx，property最终都会编译为true）;

        3、当使用removeAttribute函数移除hidden的时候，attribute才为null，input才会显示；

        4、当property的hidden设为false的时候，attribute也会为null

注意：当在代码里面添加hidden属性跟使用testInpt.hidden=true时一样的效果。但是attribute属性，只有一个属性名hidden，是没有值的，所以在输出的时候为空，在更改attribute属性值的时候并没有影响property属性的改变，但是移除attribute的hidden时，则将property的hidden设为了false,即hidden属性的默认值

总结： 

        1、property和attributies都是properties的子集，而每个attribute是attributies的子集；

         2、attribute可以理解为特性，可以自定义，直接在html标签上添加的和使用setAttribute添加的情况一致，即html标签添加的都是attribute属性， property则是使用xx.属性进行更改，通常来讲，更改互相影响（value除外）

         3、当添加新的非默认属性时，是不互通的； 

        4、一些特殊属性，则需要特殊对待。

本文内容转载于：https://blog.csdn.net/zhy13087344578/article/details/79036967；

分类：HTML/CSS;