Javascript getElementsByTagName 破坏了 firefox？

Question

我今天在 Firefox 中遇到了 Javascript 最奇怪的问题。

我正在尝试操作一些表格行，但是 .getElementsByTagName("tr");正在拉回垃圾。

dynamicTable.tableBody = dynamicTable.getElementsByTagName("tbody")[0];
var tableRows = dynamicTable.tableBody.getElementsByTagName("TR");
var actualTableRows = new Array();
for(var i in tableRows) {
    var row = tableRows[i];
    alert(row.tagName);
    if(row.tagName == "TR"){
       actualTableRows.push(row);
    }
}
dynamicTable.bodyRows = actualTableRows;

当然，令人费解的部分是我修复错误的临时 hack。由于某种原因.getElementsByTagName("tr")也在撤回一些功能。

顺便说一句，上面的警报是这样的“TR TR TR TR undefined undefined undefined”。

我想要的代码是这样的

dynamicTable.bodyRows = dynamicTable.tableBody.getElementsByTagName("tr");

然后 bodyrows不只包含 <tr>元素，它里面有前面提到的垃圾。

有什么想法吗？

编辑:如果我只使用第二个代码块，我会在一个有 21 个表行(tr 元素)的表上得到一个 24 个元素长的列表。第一个代码块只是解决问题的 hack。

如果我将警报更改为 alert(row)我得到:

[object HTMLTableRowElement]
...

function item() {
    [native code]
}

21

function namedItem() {
    [native code]
}

Answer 1

for-in 语句还枚举了 HTMLCollection 上的 item 和 namedItem 方法。 getElementsByTagName 返回。

要迭代像 DOM 集合这样的类数组元素，总是推荐一个简单的顺序循环，for...in 语句旨在用于 < strong>枚举对象属性。

dynamicTable.tableBody = dynamicTable.getElementsByTagName("tbody")[0];
var tableRows = dynamicTable.tableBody.getElementsByTagName("TR");
var actualTableRows = new Array();
for(var i = 0, n = tableRows.length; i < n; i++) { // <---- simple for loop
    var row = tableRows[i];
    alert(row.tagName);
    if(row.tagName == "TR"){
       actualTableRows.push(row);
    }
}
dynamicTable.bodyRows = actualTableRows;

你不应该将 for..in 与类似数组的对象一起使用，因为:

• 无法保证迭代的顺序，数组索引可能不会按数字顺序访问。
• 还枚举了继承的属性(这可能是问题的另一个来源)。

推荐文章:

• Enumeration VS Iteration