elementNode.getAttribute(name)和elementNode.name
其实一直都以为这两个是等价的，而后者显得更方便，但是就在昨天测试 CSSer 的一个脚本时发现，在某些时候它们是不一样的。
首先我们来看一个例子：
<!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> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>无标题文档</title> </head> <body> <div id="hh" onclick="alert(this.id);">点击我，输出我的属性</div> </body> </html>
你可以在各浏览器下点击右下角的运行按钮运行，然后点击输出，可以看到在各个浏览器下，都会正确的输出 id 的属性值，然而，当我们自定义一个属性的时候，它还会正常工作吗？
或许你觉得使用标准标签以外的自定义标签就是违反了 web 标准，但是标准标签不能满足我们的需求，我们自定义的标签却能更准确的表达我们的意思，web 标准永远都只是一个参考，而不能一成不变的去用。
现在我们为了我们的需要，自定义一个 wordlength 的属性，并使用上个例子中的方法去输出它：
<!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> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>无标题文档</title> </head> <body> <div id="hh" wordlength="10" onclick="alert(this.wordlength);">输出他的属性</div> </body> </html>
你可以在各浏览器下点击右下角的运行按钮运行，然后点击输出，看是否可以输出正确的值？经过测试，只有在 IE 浏览器下才可以正确输出，而在 Firefox、Opera、Safari、Chrome 下均输出 undefined，因此当我们需要获取我们自定义的属性的值时需要使用 elementNode.getAttribute(name)。
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
</head>
<body>
<div id="hh" wordlength="10" onclick="alert(this.getAttribute('wordlength'));">输出他的属性</div>
</body>
</html>
在各浏览器下运行这段代码，都可以得到正确的值。
本文所测试的浏览器版本：IE 6、IE 7、IE 8 Beta 2、Firefox 3.0.3、Opera 9.62、Safari 3.1.2、Chrome 0.3。
标签： getAttribute
这篇文章发布于 2008年11月5日，星期三，14:36，归类于 HTML, JavaScript。 您可以跟踪这篇文章的评论通过 RSS 2.0 feed。 您可以留下评论，或者从您的站点trackback。
