无法使getElementsByTagName正常工作

Question

I'm trying to make a JavaScript that alternates the color of each row in multiple tables. 我正在尝试制作一种JavaScript，该JavaScript可以改变多个表中每一行的颜色。 The catch is that some tables aren't going to be altered at all. 问题是某些表根本不会被更改。 So, I'm trying to use this code to get the rows of the table: 因此，我正在尝试使用此代码来获取表的行：

function alternateRows(myTable)
  var rows = document.getElementsByTagName("table").getElementsByClassName(myTable).getElementsByTagName("tr");

And, in the HTML: 并且，在HTML中：

<body onload="alternateRows('myTable')";>
  <table class="myTable">

I can get it to work just fine if I use the id attribute and change the JavaScript to: 如果使用id属性并将JavaScript更改为：我可以使其正常工作

var rows = document.getElementById(myTable).getElementsByTagName("tr");

Any suggestions would be great. 任何建议都很好。 Thanks! 谢谢！

Answer 1

getElementsByTagName returns a NodeList , thats why it called getElements not getElement. getElementsByTagName返回一个NodeList ，这就是为什么它调用getElements而不是getElement的原因。 a NodeList does not have the "getElementsByClassName" method defined, that's the error you should see. NodeList没有定义“ getElementsByClassName”方法，这是您应该看到的错误。

You'll need to use loops. 您将需要使用循环。 Also know that you can use CSS selectors for this, all modern browsers support this except IE 8 and lower. 还知道您可以为此使用CSS选择器，除IE 8及更低版本外，所有现代浏览器均支持CSS选择器。

CSS for modern browsers (or IE8- with eg a helper library, like ie9.js ) 适用于现代浏览器的CSS（或IE8，带有例如helper库，例如ie9.js ）

table.mytable tr:nth-child(odd) {
    background-color: black;
}
table.mytable tr:nth-child(even) {
    background-color: white;
}

Answer 2

There are two kinds of DOM methods: DOM方法有两种：

Methods which return a reference to a single node. 返回对单个节点的引用的方法。 For example getElementById and querySelector . 例如getElementById和querySelector 。
Methods which return a list of nodes. 返回节点列表的方法。 For example, getElementsByTagName , getElementsByClassName , querySelectorAll . 例如， getElementsByTagName ， getElementsByClassName ， querySelectorAll 。

Those methods which return a list of nodes usually return a NodeList ^[MDN] object, which has a very limited interface. 那些返回节点列表的方法通常返回NodeList ^[MDN]对象，该对象的接口非常有限。 All you can do with it is access the single elements in the list, just like an array, it does not have the same interface as a DOM node (or element). 所有你可以用它做的是访问单个元素的列表，就像一个阵列，它不具有相同的接口DOM节点（或要素）。

If you want to call further DOM methods or DOM properties on the elements in the list, you can either access a specific node directly with its index, or iterate over the list and do so for each element: 如果要在列表中的元素上调用其他DOM方法或DOM属性，则可以直接使用其索引访问特定节点，也可以遍历列表并针对每个元素进行操作：

var elements = document.getElementsByTagName('div');

for(var i = 0, l = elements.length; i < l; i++) {
    // do something with elements[i]
}

Note that NodeList s are usually live , which means any changes to the DOM (eg removing a div element) will update the list automatically. 请注意， NodeList通常是live ，这意味着对DOM的任何更改（例如，删除div元素）都会自动更新列表。

In your particular situation, you have to options: 在您的特定情况下，您必须选择：

Use querySelectorAll to select all rows: 使用querySelectorAll选择所有行：
```
 var rows = document.querySelectorAll('table.' + myTable + ' tr'); 
```
or iterate over the selected elements: 或遍历所选元素：
```
 var rows = []; var tables = document.getElementsByTagName("table"); for (var i = 0, l = tables.length; i < l; i++) { // check whether it is a table with class in the variable `myTable` if ((' ' + tables[i].className + ' ').indexOf(' ' + myTable + ' ') > -1) { rows = rows.concat(tables[i].getElementsByTagName('tr')); } } 
```
Instead of selecting the elements by tag name and then test their class, you could directly use getElementsByClassName instead, but it is not as widely supported as querySelectorAll . 您可以直接使用getElementsByClassName代替直接通过标签名称选择元素然后测试其类，但是它不像querySelectorAll那样得到广泛支持。

Answer 3

Try this: 尝试这个：

You can use only by getElementsByTagName or by getElementsByClassName Like: 您只能通过getElementsByTagName或getElementsByClassName来使用，例如：

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

or 要么

var rows = document.getElementsByClassName('myTable')[0].getElementsByTagName("tr");

or use querySelectorAll 或使用querySelectorAll

Syntax: 句法：

var matches = document.querySelectorAll("div.note, div.alert");

In your example: 在您的示例中：

var rows = document.querySelectorAll("table."+myTable).getElementsByTagName("tr");

getElementsByTagName gives array so you should use it with zero index Same for getElementsByClassName getElementsByTagName提供数组，因此您应该使用zero index数组。与getElementsByClassName相同

Read https://developer.mozilla.org/en-US/docs/DOM/element.getElementsByTagName And https://developer.mozilla.org/en-US/docs/DOM/document.getElementsByClassName 阅读https://developer.mozilla.org/en-US/docs/DOM/element.getElementsByTagName和https://developer.mozilla.org/en-US/docs/DOM/document.getElementsByClassName

Answer 4

If all of your tables must be modified in same way, you can use following code: 如果必须以相同方式修改所有表，则可以使用以下代码：

var tables = document.getElementByTagName("table");
for (var i in tables)
{
    var rows = tables[i].getElementByTagName("tr");
    //Alternating code here
}

无法使getElementsByTagName正常工作

问题描述

4 个解决方案

解决方案1
2 已采纳 2013-03-22 08:23:29

解决方案2
2 2013-03-22 08:26:11

解决方案3
0 2013-03-22 08:24:43

解决方案4
0 2013-03-22 08:29:42

无法使getElementsByTagName正常工作

问题描述

4 个解决方案

解决方案1 2 已采纳 2013-03-22 08:23:29

解决方案2 2 2013-03-22 08:26:11

解决方案3 0 2013-03-22 08:24:43

解决方案4 0 2013-03-22 08:29:42

解决方案1
2 已采纳 2013-03-22 08:23:29

解决方案2
2 2013-03-22 08:26:11

解决方案3
0 2013-03-22 08:24:43

解决方案4
0 2013-03-22 08:29:42