<form id='my_form' action=''>
<input type="text" name='id' value='name = id'>
</form>
看看这段 HTML 代码, 有特殊的地方. 细心的你可能已经发现了, 那就是有个元素的 name 被命名为 'id'.
在看看下面的js 脚本
<SCRIPT LANGUAGE="JavaScript">
<!--
//IE 为 6.0 ,Firefox 为 3.5, form['id']这样的写法就不测试了
var form = document.getElementById('my_form');
if(form != null){
alert(typeof form.id);//IE,Firefox: object
alert(form.id.value); //IE,Firefox: name = id
alert(typeof form.getAttribute('id'));//IE: object; Firefox: string
alert((typeof form.getAttribute('id') != 'string')?
form.getAttribute('id').value: //IE: name = id
form.getAttribute('id')); //Firefox: my_form
alert(typeof document.getElementsByName('id')[0]);//IE, Firefox: object
//DOM, 下面这两个方法是可靠的
alert("getAttributeNode:" + form.getAttributeNode("id").nodeValue); //IE,Firefox: my_form
alert("attributes:" + form.attributes['id'].value); //IE,Firefox: my_form
}
//-->
</SCRIPT>
如果你是要获取表单 my_form 的属性id 的值, 通过 my_form.id 或者正规点的写法 my_form.getAttribute('id'), 那恭喜你, 你中奖了, 如果客户用的是 Firefox, 你可能能逃过一劫, 客户用的是 IE6, 那你就糟糕了, 传递一个字符串的地方变成传递一个元素对象.
如果你是要获取name 为 id 的元素, 那就刚好能满足你的需要.
还好DOM 有可靠的解决办法, form.getAttributeNode("id").nodeValue 和 form.attributes['id'].value, 后者的写法应该是更简单点.
如果是用 prototype.js 和 jquery.js 呢,
<script src='prototype.js'></script>
//prototype.js 1.6
alert("readAttribute:" + $('my_form').readAttribute('id')); //IE:object; Firefox:my_form
很可惜在IE6 下 prototype 不能识别, 因为他没专门对form元素特殊处理. Firefox 可以正确识别是因为调用了 getAttribute() 方法, 看了一下 prototype1.7版本的源代码, readAttribute 方法跟1.6版本的一模一样.
<script src='jquery-1.4.2.js'></script>
//jquery.js 1.4.2
alert("attr:" + $('#my_form').attr('id'));//IE,Firefox:my_form
jquery 在 IE 和 Firefox 都能正确识别, 其实是 jquery 对 form 元素特殊处理, 最后是用了getAttributeNode().nodeValue;
为了写这篇博客, 我是把prototype 和 jquery 的相关方法的源代码都仔细看过了.
把 name='id' 改为 id='id', 结果是没什么区别, 这里就不多说了.
大家可以试试把<form> 改为 <div> 试试, 很有趣的区别.
最后贴下 id='id' 的测试代码
<form id='my_form2' METHOD=POST ACTION="">
<INPUT TYPE="text" id='id' value='id = id'>
</form>
<SCRIPT LANGUAGE="JavaScript">
<!--
//IE 为 6.0 ,Firefox 为 3.5
var form2 = document.getElementById('my_form2');
if(form2 != null){
alert(typeof form2.id);//IE,Firefox: object
alert(form2.id.value); //IE,Firefox: id = id
alert(typeof form2.getAttribute('id'));//IE: object; Firefox: string
alert((typeof form2.getAttribute('id') != 'string')?
form2.getAttribute('id').value: //IE: id = id
form2.getAttribute('id')); //Firefox: my_form2
alert(typeof document.getElementById('id'));//IE, Firefox: object
//DOM, 下面这两个方法是可靠的
alert("getAttributeNode:" + form2.getAttributeNode("id").nodeValue); //IE,Firefox: my_form2
alert("attributes:" + form2.attributes['id'].value); //IE,Firefox: my_form2
//prototype.js 1.6
alert("readAttribute:" + $('my_form2').readAttribute('id')); //IE:object; Firefox:my_form2, 很可惜在IE下prototype不能识别, 因为他没专门对form元素特殊处理
//jquery.js 1.4.2
//alert("attr:" + $('#my_form2').attr('id'));//IE,Firefox:my_form2, 其实jquery对form元素特殊处理, 实际上用了getAttributeNode().nodeValue;
}
//结论同上
//-->
</SCRIPT>