javascript - getElementsByTagName 不起作用？

Question

在下面的代码中，我通过使用 javascript 动态地将“偶数”类分配给所有偶数行，从而为它们应用不同的背景颜色。我正在调用 body 标记的 alternamte() 函数 onload。

首先，我使用 getElementById 来获取表对象，并且我的代码运行良好。但是，我想将此样式应用于页面上的所有表格，因此我需要使用按标签名称获取元素。

一旦我更改了 getElementByTagName，我的代码就停止工作，我已经尝试找出问题的根源一段时间了，但没有成功。我想知道是否有人可以帮助我理解为什么我的代码在更改 getElementByTagName 后停止工作？

  <script type="text/javascript"> 
    function alternate(){
        var table = document.getElementsByTagName("table");   
        var rows = table.getElementsByTagName("tr");   

        for(i = 0; i < rows.length; i++){           
            //change style of even rows 
            //(odd integer values, since we're counting from zero)
            if(i % 2 == 0){ 
                rows[i].className = "even"; 
            }     
        }   
    }
  </script>

Answer 1

这是 getElementsByTagName() ，复数。它返回一个 HTMLCollection

var table = document.getElementsByTagName("table")[0];   

(如果您确信页面上有 <table>。)

如果您想对 <table> 的所有进行操作元素，你必须这样做:

    var tables = document.getElementsByTagName("table");   

    for (var ti = 0; ti < tables.length; ++ti) {
      var rows = tables[ti].getElementsByTagName("tr");   
      for(var i = 0; i < rows.length; i++){           
        //change style of even rows 
        //(odd integer values, since we're counting from zero)
        if(i % 2 == 0){ 
            rows[i].className = "even"; 
        }     
      }   
    }