JavaScript中面向对象DOM操作的混乱混乱

Confusing muckup in object-oriented DOM manipulation in JavaScript

本文关键字：混乱 操作 DOM 面向对象 JavaScript      更新时间：2024-04-19

我一直在努力解决这个问题（Javascript不是我经常使用的语言之一，我可能把代码搞砸了，所以如果它很糟糕，很抱歉！）

我正在尝试遍历一个HTML表，该表包含在Id为"JoinRequestsList"的元素中。在W3Schools的网站上（特别是这里），我可以使用get一个元素，然后用相同的方法（或类似的方法）引用它来获取子元素。无论如何，这是我的代码：

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

我收到的错误消息（在有问题的网页上的谷歌Chrome控制台中运行时）错误：

VM818:4未捕获类型错误：two.getElementsByTagName不是函数（…）

我能做些什么来解决这个问题？非常感谢。

getElementsByClassName和获取getElementsByTagName返回数组时，如果您想对数组执行任何操作，则需要提取数组的特定元素。或者只需循环遍历所有元素。

还要注意，锚元素可能在单元格中，而不是行中（除非有一些非常糟糕的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);
      }
    }
   }  
}
相关文章：