不能让getElementsByTagName正确工作

Can't get getElementsByTagName to work correctly

本文关键字：工作 getElementsByTagName 不能      更新时间：2023-09-26

我试图使一个JavaScript，交替在多个表的每一行的颜色。问题是有些表根本不会被改变。因此，我试图使用以下代码来获取表的行:

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");

任何建议都很好。谢谢!

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

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

现代浏览器的CSS(或IE8-例如helper库，如ie9.js)

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

有两种DOM方法:

  1. 返回对单个节点引用的方法。例如:getElementById、querySelector

  2. 返回一个节点列表的方法。例如: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通常是活动的，这意味着对DOM的任何更改(例如删除div元素)都会自动更新列表。

在你的特殊情况下，你必须选择:

  1. 使用querySelectorAll选择所有行:

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

  2. 或遍历所选元素:

    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那样被广泛支持。

如果必须以相同的方式修改所有表，则可以使用以下代码:

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

试试这个:

只能由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给出了数组，所以你应该将它与zero index一起使用getElementsByClassName

相同

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

相关文章：