HTML标签内属性——尤其class属性（整理）

通过两行代码来看a元素的属性：class，href，title，style，id，lang等

<a class="top1"  href="www.56young.com" title="click me" style="display: block;">空连接0</a>
<a id="top2"  href="www.56young.com" lang="CN" tabindex="2" hidden="hidden" status="1">空连接1</a>

访问a标签中属性xxx的办法是：

1、object.xxx

2、object["xxx"] //此条是1的变体,可以看做是等价的

3、object.getAttribute("xxx")



但是在访问中存在兼容问题，大概可以划分为两类问题：

A、属性的兼容：id、class、href、title、style、hidden等属性并非都可以用1，2，3这三个方案访问；

[b]B、浏览器的兼容：并非所有的浏览器都内置了这三个方法。[/b]

对class属性的进一步探讨：

1-1、className属性。a标签中class属性，供添加样式用，相关概念有class及映射className、classList这3个。


一般来说，所有属性都可以object.xxx、object["xxx"]及object.getAttribute("xxx")来访问的，但因class属于JavaScript保留字，故将其映射为className来供上述方案访问。所以标准浏览器都支持：a.className和a["className"]这2个办法的访问。

至于a.getAttribute("class")还是a.getAttribute("className")则需看浏览器是否兼容这个方法的访问了。（待考：前者能在Mozilla(Firefox)和Opera中正确运行，在IE和Safari中则不能使用。后者能在IE和Opera中正确运行，在Mozilla(Firefox)和Safari中则不能使用。）

但DOM2级方法object.getAttribute("xxx")，用来获取标签内的自定义属性是没问题的，所以一个保守的做法是

1-2、classList属性。因为class属性的值可以包含若干个样式名，如class="top1
left",这个字符串性质的值经常需要我们操作，className完成class的了映射，但操作class属性的值时却显得僵硬的很。怎么办，HTML5 新增API之classList能解决这个问题。

classList属性又是对className的一个改进，就像我们见到的arguments属性、childNode属性一样，可以理解为一个类数组对象。（仍然待考哈）

classList带来了一些操作方法和属性：add(
), remove( ),toggle( ),contains( )等及length。

可以用a.classList或者a["classList"]办法访问，a.getAttribute("classList")仍然存在浏览器兼容问题。

2、对于href属性，[b]style属性、hidden属性，getAttribute("xxx")访问和.号、[
]号访问的结果为啥有区别呢？[/b]

//在ff上的访问结果：

var a = document.getElementsByTagName('a')[0];
	console.log("1 "+a.href);  //"1 file:///C:/Users/Administrator/Desktop/www.56young.com"
	console.log("2 "+a["href"]);  //"2 file:///C:/Users/Administrator/Desktop/www.56young.com"
	console.log("3 "+a.getAttribute("href"));  //"3 www.56young.com"

	console.log("4 "+a.style);  //"4 [object CSS2Properties]"
	console.log("5 "+a["style"]);  //"5 [object CSS2Properties]"
console.log("6 "+a.getAttribute("style"));  //"6 display: block;"

为啥不同结果呢？

这里肯定存在浏览器解析的问题，但究竟如何还的后续深究下，如有高手路过，切望不吝赐教啊~