在获取比较值的时候会用in来判断是否可以用[x]方式,其实是判断该属性是属于attribute还是property。
那attribute和property到底是什么呢,有什么区别呢?这个或许很多人都没留意,或许认为是同一个东西。
要明确attribute和property是不同的东西就要先知道它们分别是什么,这个很难说得清,举些例子就明白了。
这里我们先以ff为标准,后面再说ie的区别。以div为例,查查网页制作完全手册,会找到它有以下属性:
ALIGN      align
CLASS      className
ID            id
TITLE       title
...            ...
其中第一列就是attribute,第二列就是property。
attribute是dom元素在文档中作为html标签拥有的属性,property就是dom元素在js中作为对象拥有的属性。
例如在html中dom作为页面元素应该直接用class属性,对应在js中作为dom对象就必须用className属性。
由于attribute是不分大小写的,这使得大部分的attribute和property看起来会一样,使人误以为同一个东西(当然ie的责任也很大)。
还不相信的话可以用ff看看下面的例子:

<div id="t" tt="1">test</div>
<script>
var o = document.getElementById('t');
o["tt"]="2";
document.writeln(o.getAttribute("tt"));
document.writeln(o["tt"]);
</script>

可以看出getAttribute和[x]方式得到了不同的答案。
这里必须先说说getAttribute和[x]方式的区别,getAttribute和setAttribute是专门用来获取和设置attribute的,
而[x]方式就是获取和设置property属性的,这个property跟我们一般操作的js对象的属性是一样的。
或许有人会有疑问,像id,title不是都指向同一个属性吗,修改property对应attribute也会跟着修改。
其实我们也可以自定义一个这样的属性,在ff测试下面的代码:

Code
<div id="t" tt="1">test</div>
<script>
var o = document.getElementById('t');
o.__defineSetter__("tt", function(x) { this.setAttribute("tt", x); });
o.__defineGetter__("tt", function() { return this.getAttribute("tt"); });
o.tt="2";
document.writeln(o.getAttribute("tt"));
document.writeln(o["tt"]);
</script>

这样就实现了“修改property对应attribute也会跟着修改”的属性了。
从测试例子还可以看到attribute跟对应的property完全可以使用不一样的属性名,像class和className的效果。
也能在Getter中对attribute的值进行处理再返回,就像href的property值是attribute的完整路径形式。
而property可以没有对应的attribute,反过来也一样,像innerHTML这样的property就没有对应的attribute。
ps:以上只是说明实现的原理,事实上并不需要这样来实现。

既然知道attribute和property是不同的东西,那如何分辨一个属性是属于attribute还是property呢。
我们可以用in来判断property,用hasAttribute判断attribute。
但ie6/7没有hasAttribute,是不是只能用in来判断呢?对了一半,因为ie6/7根本就不需要hasAttribute。
在ie6/7中,并没有很好地区分attribute和property。例如ie6/7运行下面代码:

Code
<div id="t" tt="1">test</div>
<script>
var o = document.getElementById('t');
o["tt"]="2";
document.writeln(o.getAttribute("tt"));
document.writeln(o["tt"]);
o.setAttribute("tt","3");
document.writeln(o.getAttribute("tt"));
document.writeln(o["tt"]);
o["rr"]="4";
document.writeln(o.getAttribute("rr"));
document.writeln(o["rr"]);
document.writeln(o.getAttribute("innerHTML"));
document.writeln(o["innerHTML"]);
</script>

可以看到,里面基本没有attribute和property之分,而ie8的结果除了getAttribute("innerHTML"),其他跟ie6/7一样。
当然我觉得ie的制作者肯定知道attribute和property的区别,只是他们为了得到使用者想当然的结果,所以才这么弄。
本来被这么忽悠也没什么不好,但后来我发现一个问题:

<div id="t" class="a">test</div>
<script>
var o = document.getElementById('t');
o.setAttribute("class","b");
alert(o.outerHTML);
</script>

这样修改的样式是无效的,按照ie的规矩要使用className,但问题是从outerHTML中居然看到div标签中有两个class属性。
之前我一直都不知如何理解ie这个现象,不过这在ie8中已经得到了修正。
在ie8中已经把attribute和property区分开了(详细看Attribute Differences in Internet Explorer 8)。
例 如getAttribute("innerHTML")返回的是null,说明innerHTML不再是 attribute;setAttribute("class",x)修改的是attribute,不再是给dom元素添加一个莫名其妙的class属 性;貌似getAttribute也没有了第二个参数(getAttribute的第二个参数可以看这里);还有name属性的混乱问题也正常了(参考这里)。
不过ie8依然使用添加新属性会同时是attribute和property的模式,估计还是为了兼容之前的版本,可怜的ie8。

ps:以上都以[x]为例子,而使用.运算符的效果跟[x]是一样的。
ps2:由于对dom没有很深入的了解,这部分可能会有问题,欢迎各位指出。
ps3:发现自己的dom知识太少,正准备找本dom的书看看。

转载于:https://www.cnblogs.com/sking7/archive/2011/10/12/2208555.html

属于attribute还是property。相关推荐

  1. java中类图概念,程序员眼中的UML(4)--类图释疑之一,Attribute和Property之区别

    程序员眼中的UML(4) --类图释疑之一,Attribute和Property之区别 上一篇中提出了很多问题,其中最令人费解的可能就是Attribute和Property之区别了吧.我在网络上寻找良 ...

  2. JavaScript DOM 4 - 属性 attribute vs property

    1: 获取网页元素的属性值 HTML里面的标签,都有一些属性(attribute),比方: <img src="http://www.abc.com/logo.png" cl ...

  3. Attribute和Property的区别

    Attribute和Property的区别 attribute是XML元素中的概念,用于描述XML标签的附加信息,即XML标签的属性,property是JavaScript对象中的概念,用于描述Jav ...

  4. 对于DOM的attribute和property的一些思考

    2019独角兽企业重金招聘Python工程师标准>>> 前段时间,观看了WTP的一篇文章"DOM的attribute和property",觉得写的很好,感谢WTP ...

  5. java中的variable是什么,Java POJO中的field,variable,attribute和property有什么区别?

    从这里: http : //docs.oracle.com/javase/tutorial/information/glossary.html 领域 一个类的数据成员. 除非另外指定,否则字段不是静态 ...

  6. JavaScript 中 Property 和 Attribute 的区别

    转自:http://www.cnblogs.com/elcarim5efil/p/4698980.html property 和 attribute非常容易混淆,两个单词的中文翻译也都非常相近(pro ...

  7. attribute property --- jquery attr() prop()

    看了http://www.cnblogs.com/aaronjs/p/3387906.html ,总结下: attribute: 特性 直接写在标签上的属性,可以通过setAttribute.getA ...

  8. Property 和 Attribute 的区别(转)

    property 和 attribute非常容易混淆,两个单词的中文翻译也都非常相近(property:属性,attribute:特性),但实际上,二者是不同的东西,属于不同的范畴. property ...

  9. property和attribute的区别

    property是指类向外提供的数据区域. 而attribute则是描述对象在编译时或运行时属性的,分为固有型和用户自定义型,其中用户自定义型可以利用Reflection在运行期获取. 这两者是有本质 ...

最新文章

  1. 前端学习 -- Css -- 盒子模式
  2. 2017年前端工作小结,个人踩坑之旅,前端学习者的杂谈
  3. 读写应用程序数据-SQLite3
  4. Java实现向指定URL用POST方法发送Json格式字符串参数请求的工具类
  5. 直播预告丨行业大咖带你找到游戏企业经营新升级的正确打开方式
  6. 共享锁和排它锁的用法
  7. Dapr + .NET 实战(十四)虚拟机集群部署 mDNS + Consul
  8. [CodeForces332E]Binary Key
  9. 服务器执行sh文件或目录,将window的shell脚本通过ftp传输到Linux服务器后, shell脚本中执行时提示“没有那个文件或目录”的解决办法...
  10. 产品需求文档模板,不用找了(附“简”例)【转】
  11. 小程序:选举投票问题未知行数输入问题(含代码)
  12. 阿里云 OSS浏览器使用步骤
  13. 腾讯云 接口验签 使用qcloud-java-sdk
  14. win7、win10常用快捷键
  15. 可喜可贺,暴雪即将收购第一家工作室Proletariat,魔法吃鸡停运
  16. 常用eclips快捷键小结
  17. CENTOS5.5下使用Roundcube搭建 Webmail
  18. GooglePlay马甲包过审详细流程
  19. 20岁以后增高方法大全
  20. MATLAB初阶绘图

热门文章

  1. leetcode —— 1038. 从二叉搜索树到更大和树
  2. 事业单位考试考试【转载】
  3. 一文搞懂C语言回调函数
  4. OpenCV--常见图片格式转换与深浅拷贝
  5. 布尔(bool)全排列
  6. 实车采集的数据重建场景_避障、探测、采样......华理这套系统让无人小车“身手非凡”...
  7. v-model双向绑定原理_【Vue原理】VModel 白话版
  8. 远程主机访问mysql权限_如何给远程主机开启mysql远程登录权限
  9. go mysql use 问题,Go语言使用MySql的方法
  10. opengl绘制的点不显示是什么原因_中考后为什么不允许复读?原因主要在以下5点,你都清楚吗?...