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;

令人费解的部分当然是我修复错误的临时黑客.出于某种原因,.getElementsByTagName("tr")也撤回了一些功能.

很明显,上面的警报类似于"TR TR TR TR undefined undefined undefined".

我想要的代码是这样的

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

但是后来bodyrows不仅包含<tr>元素,它还有上面提到的垃圾.

有什么想法吗？

编辑:如果我只使用第二个代码块,我会在一个有21个表行(tr元素)的表上得到一个24个元素的列表.第一个代码块只是解决问题的黑客攻击.

如果我改变警报,alert(row)我得到:

[object HTMLTableRowElement]
...

function item() {
    [native code]
}

21

function namedItem() {
    [native code]
}

Answer 1

该for-in声明还列举item和namedItem方法上存在的HTMLCollection是getElementsByTagName返回.

要迭代像DOM Collections这样的类数组元素,总是建议使用简单的顺序循环,该for...in语句用于枚举对象属性.

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类似数组的对象,因为:

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

推荐文章:

• 枚举VS迭代