Js中用分析document.getElementsByID获取多个同名对象问题

阅读这篇文章是因为在工作中，需要通过document.getElementsByID，获取foreach中每一条数据，然后改变其样式，但是发现只有第一条数据生效，其他数据属性都是null,通过分析之后给foreach中加入动态id，之后找到下面文章，解决的心中的疑惑。

在写了很多js后,会发现在js中总会出现各种各样奇怪的问题,主要的问题是不能获得所需要的对象.

一般来说,我们所需要获得的对象有几种办法获得:

1. ID 法,通过使用document.getElementById()这个方法获得用户所需的对象,你只需要在标签中加入id="yourIdName"这样的属性,你就可以用这个方法获得这个对象了.举个例子来说:有如下代码

<table><tr id='zergTr'><td>这里是zergpest的第一行</td></tr></table>

那么我们要获得这个tr,并且设置这个tr为不可见,应该这样做.请看如下代码:

<script type="text/javascript">
      var zergpest = document.getElementById("zergTr");
      zergpest.style.display = "none";
</script>

这样就可以通过使用document.getElementById() 这个方法来获得改对象,并且设置该对象为不可见.

但是,如果我们需要设置多个具有同样ID的对象不可见的时候,这个方法就不能用了,因为无论你怎么为后面的标签添加id属性,用document.getElementById()这个方法获得的只能是第一个具有该ID的对象,其实其他的ID这时候应该是属于伪Id了.你所要操作的只能操作到第一个具有该ID的对象,而不是具有所有你所设置的具有该ID的对象.那么这时候我们该怎么办呢,请看第2种方法.

2.Name法,通过使用document.getElementsByName()这个方法获得用户所需的对象,你需要做的是在标签中加入name="yourname"这样的属性,道理上说你就可以使用该方法获得该对象了.然而,有些时候确不是这样的,document.getElementsByName()这个方法其实主要是针对form标签中的对象有用,在form标签以外的对象就不一定有用了,这里说的不一定,是说有时候有用,有时候没有用.不过也可能和我用的IE7 beta3 有关,没有深入研究过.举个例子了说,有如下代码.

<table><tr name='zergTr'><td>这里是zergpest的第一行</td></tr></table>
<table><tr name='zergTr'><td>这里是zergpest的第二行</td></tr></table>

我们这里有二个相同的name,因为这个方法是获取具有多个name的,如果只有一个name的话,那么建议你用ID法来获取,而不要用这种,不然的话你需要进行判断length值.

我们可以用如下代码来获取该对象,并且设置该对象为不可见,代码如下:

<script type="text/javascript">
    var zergpest = document.getElementsByName("zergTr");
    if (!zergpest.length)
    {
          zergpest.style.display = "none";
     }
     else
    {
          for (var i=0;i<zergpest.length;i++)
          {
               zergpest[i].style.display = "none";
          }
     }
</script>

这样,道理上我们应该可以设置所有name值为zergTr的对象为不可见了,可是事实往往并不能如你所希望的,如果我们在前面加个标签,那么结果就可以得到你所需要的结果了,但没有form标签的话,结果是有时候可以正确,有时候不正确,甚至不能获得对象.这时候,我们用第3种方法来解决,这就是轩辕的JS对象大招了.

3.超级Name大法,通过使用document.documentElement.getElementsByTagName()这个方法结合name法来获得这些你所需要的对象.还是用刚才的例子.如下:

<table><tr name='zergTr'><td>这里是zergpest的第一行</td></tr></table>
<table><tr name='zergTr'><td>这里是zergpest的第二行</td></tr></table>

这里我们需要设置该标签为不可见,而也不希望加上看着很不愉快的标签,这时我们就需要用如下代码:

<script type="text/javascript">
    var zergpest = document.documentElement.getElementsByTagName("tr");
    if (!zergpest.length)
    {
        zergpest.style.display == "none";
    }
    else
    {
        var realZerg = [];
        for (var i=0;i<zergpest.length;i++)
        {
             if (zergpest[i].name == "zergTr")
            {
                realZerg.push(zergpest[i]);
            }
        }
        if (realZerg.length)
        {
            for (var j=0;j<realZerg.length;j++)
            {
                realZerg[j].style.display = "none";
            }
        }
    } 
</script>

这样就可以把所有name值等于yourname这样的多个对象设置为不可见了,这就是轩辕的超级Name大法,:),不要觉得用了2个for会牺牲性能,占用用户的cpu,其实现在用户的cpu最少都是1.5GHz以上,这点小运算对CPU来说根本就是骆驼身上的一个细胞,而且用户的cpu闲着也是闲着,既然对他供着电,那就让他做点事情吧.:)这3种方法各有好处,按照不同的需要可以选择不同的方法.终究会达到js所需要的目的.