请选择 进入手机版 | 继续访问电脑版
本站特色:极好的技术研究氛围!所有技术发帖,必有回复! 做最受欢迎的Java论坛

疯狂Java联盟

 找回密码
 加入联盟
查看: 36|回复: 0

JavaScript(JS)中attribute与property的区别

  [复制链接]
发表于 2017-12-3 18:39:05 | 显示全部楼层 |阅读模式
attribute代表写在HTML标签上、不一定符合规范的attribute, attribute属性的值总是字符串。
property代表DOM节点对象上、符合规范的property,属于面向对象范畴的property,property属性的值可能是各种类型——取决规范将该property设置为哪种类型。


对于写在HTML标签(会加载成DOM节点)上、符合规范的attribute,JS也可通过property来访问,比如id、title、style、class、dir等attribute,既可通过attribute访问,也可通过property访问;但HTML标签的子节点、元素的文本内容……这些不属于写在HTML元素上的attribute,则只能通过property访问。


HTML标签的所有attribute以Map形式存储在对应DOM对象的名为attributes的property中,通过getAttribute()、setAttribute()、removeAttribute()方法来操作DOM对象上的attribute。操作DOM对象上property则完全可用面向对象的方式进行:.propName或['propName']。


例如有下面代码。
  1. <div id="a" foo="y" style="bb">xxx</div>
  2.         <script type="text/javascript">
  3.                 let t = document.getElementById("a");
  4.                 // id是写在div标签上、符合规范的attribute,因此既可用attribute访问,也可用property访问
  5.                 // 访问attribute
  6.                 console.log(t.getAttribute("id"));
  7.                 // 访问property
  8.                 console.log(t.id);
  9.                 console.log(t['id']);

  10.                 // style是写在div标签上、符合规范的attribute,因此既可用attribute访问,也可用property访问
  11.                 // 访问attribute
  12.                 console.log(t.getAttribute("style"));
  13.                 // 访问property,但其类型不是String
  14.                 console.log(t.style);
  15.                 console.log(t['style']);

  16.                 // foo是写在div标签上、不符合规范的attribute,因此只可用attribute访问
  17.                 // 访问attribute
  18.                 console.log(t.getAttribute("foo"));
  19.                 // 访问property,div对应的DOM对象没有foo property,下面两行输出undefined
  20.                 console.log(t.foo);
  21.                 console.log(t['foo']);
  22.                 // 使用名为attributes的property访问t代表的HTML标签上的所有attribute,输出一个Map
  23.                 console.log(t.attributes)

  24.                 // 访问div元素包含的文本内容,这不是写在HTML标签上的attribute,
  25.                 // 只能通过property访问,不能通过attribute访问
  26.                 console.log(t.innerHTML);
  27.                 console.log(t.getAttribute("innerHTML")); // 输出null
  28.         </script>
复制代码



您需要登录后才可以回帖 登录 | 加入联盟

本版积分规则

视频、代码、电子书下载
请关注"疯狂图书"公众号
QQ交流1群: 545923995  未满

小黑屋|手机版|Archiver|疯狂Java联盟 ( 粤ICP备11063141号 )

GMT+8, 2017-12-18 20:40 , Processed in 0.237035 second(s), 6 queries , File On.

快速回复 返回顶部 返回列表