Difference between Properties and Attributes in JavaScript_difference between features and properties-CSDN博客

转载自https://www.mxgw.info/coding/javascript-attribute-property.html

每一个dom节点，都有各自的attributes和properties。这两者很容易用混，尤其是在表单元素上面。

Property

每一个DOM节点，都是一个对象。像其他JS对象一样，DOM节点这类型HTMLElement对象，也可以添加一些方法或者属性。这些自定义添加的属性，就是property。它只能被JS所读取，并不会影响HTML的展示。（它能被JS的for-in方法遍历出来，但innerHTML里面不会显示）

properties

Attribute

与Property不同，Attribute会DOM节点上显示出来，但不会在DOM对象中被for-in遍历出来。

attribute

例如上图的input标签，他的Attributies包括value,type,name,id。

attributies

想操作DOM元素的的attribute，得依靠下列的JS接口

 
        elem 
        . 
        hasAttribute 
        ( 
        name 
        ) 
        ; 
        // 判断是否存在 
       
 
        elem 
        . 
        getAttribute 
        ( 
        name 
        ) 
        ; 
        // 获取该Attribute的值 
       
 
        elem 
        . 
        setAttribute 
        ( 
        name 
        , 
          
        value 
        ) 
        ; 
        // 写入该Attribute的值 
       
 
        elem 
        . 
        removeAttribute 
        ( 
        name 
        ) 
        ; 
        // 删除该Attribute 
       

需要注意的是

由于Attribute会显示在DOM上面，所以它的键名不区分大小写
它的值只可以是字符串

Attribute与Property之间的同步

自动同步

所有的DOM节点对象，都有一套标准的properties 。这些DOM对象的标准properties，会自动与其attributes同步。例如id\title\lang\dir\className

 
  
         1 
       

         2 
       
 
        document 
        . 
        body 
        . 
        setAttribute 
        ( 
        'id' 
        , 
        'la-la-la' 
        )： 
       
 
        alert 
        ( 
        document 
        . 
        body 
        . 
        id 
        ) 
        ; 
         
        // la-la-la 
       
 
 

但有的properties与attributes的同步值，却并不是一样的

自动同步，但值并不完全相等

例如a标签的href属性

同步但值不同

例如表单元素input的checked属性

input.checked

只能从Attribute单向同步到Property

例如表单元素input的value属性

从Attribute同步到Property

20140331235452

Property却不能同步到Attribute

20140331235723

IE奇观

在IE6\7\8里面，propertites与attributies是自动同步的，并且attributies的值不限于字符串。
在IE6\7里面，propertites与attributies的键名不区分大小写。

总结

Properties就是JavaScript对象中的一个属性，而Attribute则是HTML元素中的一个属性。

Properties	Attributes
值可以任意类型的值	值只能是字符串
键名区分大小写	键名不区分大小写
在innerHTML里面不可见	在innerHTML里面可见
标准的DOM Properties会自动与Attributies同步，自定义的则不会