无法让getElementsByTagName正常工作

我正在尝试使JavaScript交替显示多个表中每行的颜色。问题在于有些桌子根本不会被改变。所以，我想利用这个代码来获取表中的行：无法让getElementsByTagName正常工作

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

而且，在HTML：

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

我可以，如果我用它工作得很好id属性并将JavaScript更改为：

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

任何建议都会很棒。谢谢！

来源

2013-03-22 user2198320

getElementsByTagName返回一个NodeList，这就是为什么它调用getElements而不是getElement。一个NodeList没有定义“getElementsByClassName”方法，那就是你应该看到的错误。

您将需要使用循环。也知道你可以使用CSS选择器，所有现代浏览器都支持这个，除了IE 8和更低版本。

CSS的现代浏览器（或IE8-具有例如助手库，像ie9.js）

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

来源

2013-03-22 08:23:29 dtech

那么接下来你如何从一个标签获得一个特定的类？ – user2198320 2013-03-22 08:38:34

@ user2198320：我相信我在回答中显示了这一点。该属性名为'.className'：https：//developer.mozilla.org/en-US/docs/DOM/element.className。 – 2013-03-22 08:41:42

噢，我明白了。如果我只能使用班级和无身份证件，我该怎么办？ – user2198320 2013-03-22 08:44:13

试试这个：

：

只能通过getElementsByTagName或getElementsByClassName 像使用

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

或

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

或使用querySelectorAll

语法：

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

在你例如：

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

getElementsByTagName给阵列，所以你应该使用同为getElementsByClassName

读https://developer.mozilla.org/en-US/docs/DOM/element.getElementsByTagName 而 https://developer.mozilla.org/en-US/docs/DOM/document.getElementsByClassName

来源

2013-03-22 08:24:43

感谢您的回复，但第一种方式没有奏效。我尝试了没有getElementsByTagName，它的工作，但没有当我尝试多个表。 – user2198320 2013-03-22 08:41:47

@ user2198320是的，你是对的。在这种情况下，它将使用'getElementsByTagName'或'getElementsByClassName'。 – 2013-03-22 08:50:49

有两种DOM方法：

方法，返回到单个节点的参考。例如getElementById和querySelector。
方法返回列表节点。例如，getElementsByTagName,getElementsByClassName,querySelectorAll。

那些返回节点列表的方法通常会返回一个具有非常有限接口的NodeList^[MDN]对象。你所能做的就是访问列表中的单个元素，就像一个数组一样，它不是而是与DOM节点（或元素）具有相同的接口。

如果你想打电话在列表中的元素进一步的DOM方法或DOM属性，你可以直接用它的索引，或者迭代访问特定节点上列表，并为每个元素这样做：

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

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

注意NodeList s为通常活，这意味着对任何DOM变化（例如除去div元件）将自动更新列表。

在您的具体情况，你必须选择：

使用querySelectorAll选择的所有行：

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

或迭代选择的元素：

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')); 
    } 
}

而不是通过标记名称选择元素，然后测试其类，您可以直接使用getElementsByClassName来代替，但它不如querySelectorAll那样得到广泛支持。

来源

2013-03-22 08:26:11

如果所有的表都必须以同样的方式进行修改，你可以用下面的代码：

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

来源

2013-03-22 08:29:42

无法让getElementsByTagName正常工作

回答

相关问题