通过两行代码来看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、浏览器的兼容:并非所有的浏览器都内置了这三个方法。
对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属性,style属性、hidden属性,getAttribute("xxx")访问和.号、[ ]号访问的结果为啥有区别呢?
//在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;"
为啥不同结果呢?
这里肯定存在浏览器解析的问题,但究竟如何还的后续深究下,如有高手路过,切望不吝赐教啊~