JS中的attribute和property

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

Property

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

Attribute

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

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

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

JavaScript

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

1234

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

JavaScript

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

12

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

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

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

例如a标签的href属性

例如表单元素input的checked属性

只能从Attribute单向同步到Property

例如表单元素input的value属性

从Attribute同步到Property

Property却不能同步到Attribute

IE奇观

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

总结

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

Properties

Attributes

值可以任意类型的值

值只能是字符串

键名区分大小写

键名不区分大小写

在innerHTML里面不可见

在innerHTML里面可见

标准的DOM Properties会自动与Attributies同步,自定义的则不会

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

扫码关注云+社区

领取腾讯云代金券