DOM中property与html 的attribute的区别

1.两者是完全不同的概念，property是dom节点对应的js对象的属性，包含的属性是确定的 比如某个p1元素 会包含style class id 等内容，可以直接通过js对象访问，如 p1.style、p1.class、p1.id；attribute是html节点的属性，可以自定义property不包含的属性。

如下图 xxx是html自定义的属性，p1.xxx 无法访问

image.png

image.png

image.png

2.如果节点p1的html不包含style属性，则通过p.getAttribute('style')拿到的null;但通过property方式访问p.style 可以拿到CSSStyleDeclaration对象。如下图

image.png

3.property与attribute某些属性可以共用，

比如p1的html包含style

image.png

通过p1.getAttribute('style')可以取得值。并且确实作用到css样式中，并且优先最高

image.png

通过p1.style.color = '#333';修改,也生效了

image.png

之后，通过p1.getAttribute('style')获取，发现也被修改了，

image.png

p1.setAttribute('style', 'color: yellow')设置以后，在通过p1.style.color访问也同步修改了

image.png

3.表单的value属性则不同。不管input内容如何被修改，attribute获取的value值为初始值，后期不可通过setAttribute修改。input1.value则会实时修改。

image.png