属于attribute还是property。

在获取比较值的时候会用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测试下面的代码：

<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运行下面代码：

<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的书看看。