网页元素name='id'或id='id'

<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>