方式一： element.attribute
方式二：element.getAttribute("attribute");
方式三：element.className;
一：前言
因为以前看过一篇张鑫旭的博客，记得里边有提到getAttribute的兼容性问题，但是具体的又想不起来，就自己先测试一下，但是的但是，巧合就这么简单，小女子我使用的是元素的class属性，然后不知觉地就掉入大坑了。
测试的结果是ele.getAttribute("class")在IE7（含）以下的版本中弹出的是null，以为是个兼容问题，在网上找了一天的解决方法，最后是在没有办法，就又将张鑫旭的那篇文章看了一遍，看到最后，内伤无数啊，里边提到的getAttribute跟DOM中的这个完全不是一回事儿的，当时没看懂，想着以后学到DOM的时候再看，结果的结果……哦啊……算了，不说了
二：以上三种方式的区别
都在代码中，自己看吧……
HTML：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>kingwell</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <body> <div id="idHeader" class="class-header" title="kingwell" status="1"></div> <label id="forUserName" for="userName" title="kingwell" status="1"></label> </body> </html>
javascript:
var el = document.getElementById("idHeader");
alert(el.getAttribute("id"));
alert(el.id);
//IE Firfox->idHeader
alert(el.getAttribute("class"));
//IE6,IE7 -> null IE8,IE9,Firefox ->class-header
alert(el.class);
//IE6,IE7,IE8->报错 IE9,Firefox->undefined
alert(el.getAttribute("className"));
//IE6,IE7->class-header ; IE8,IE9,Firefox -> null
alert(el.className);
//All -> class-header
var elfor = document.getElementById("forUserName");
alert(elfor.getAttribute("for"));
//IE6,IE7->undefined IE8,9,Firefox->forUseName
alert(elfor.for )
//IE6,IE7报错,其它为undefined
alert(elfor.title)
//全部输出kingwell
alert(elfor.status);
//IE6-8 -> 1 IE9,Firefox->undefined
alert(elfor.getAttribute("status"))
//全部输出 1
/*总结：
1:常规属性建议使用 node.XXXX。
2:自定义属性建议使用node.getAttribute("XXXX")。
3:当获取的目标是JS里的关键字时建议使用node.getAttribute("XXX")，如label中的for。
4:当获取的目标是保留字,如：class,请使用className代替。
*/
这个总结也非本人成果，但是中间有个小小的错误，已改；
为表达对原著者的尊重，下边是链接：
http://kingwell-leng.iteye.com/blog/1663553
时间： 2024-10-10 22:47:31