javascript - JavaScript 中面向对象的 DOM 操作中令人困惑的困惑

Question

我一直在努力解决这个困惑问题(Javascript 不是我经常使用的语言之一，而且我可能弄乱了代码，所以如果代码很糟糕，请道歉!)

我正在尝试迭代 HTML 表，该表包含在 ID 为“JoinRequestsList”的元素中。在 W3Schools 的网站上(特别是 here )，它声明我可以使用获取一个元素，然后使用相同的方法(或类似的方法)引用它来获取子元素。无论如何，这是我的代码:

var one = document.getElementById("JoinRequestsList");
var two = one.getElementsByClassName("table");
var table = two.getElementsByTagName("tbody");
for (var i = 0, row; row = table.rows[i]; i++) {
   for (var j = 0, col; col = row.cells[j]; j++) {
    if(row.getElementByTagName("a") != NULL) {
        console.log(row.getElementByTagName("a").title);
    }
   }  
}

我收到的错误消息(在相关网页上的 Google Chrome 控制台中运行时)错误:

VM818:4 Uncaught TypeError: two.getElementsByTagName is not a function(…)

我可以做什么来解决这个问题？谢谢。

Answer 1

getElementsByClassName 和 get getElementsByTagName 返回数组，如果你想用它做任何事情，需要挑选出数组的特定元素。或者只是循环遍历它们。

另请注意， anchor 元素可能位于单元格中，而不是行中(除非有一些非常糟糕的 HTML)。

var one = document.getElementById("JoinRequestsList");
var tables = one.getElementsByClassName("table");
var theTable = tables[0]; //assuming you have one table, or just want the first one
var tableBodies = theTable.getElementsByTagName("tbody");
var tableBody = tableBodies[0];

for (var i = 0, row; row = tableBody.rows[i]; i++) {
   for (var j = 0, cell; cell = row.cells[j]; j++) {
      var anchors = cell.getElementsByTagName("a");
      for( var anchorIdx = 0; anchorIdx < anchors.length; anchorIdx++)
      {
         console.log(anchors[anchorIdx].title);
      }
    }
   }  
}