0

所以我完成了一个使用 DOM 获取数据的项目。一切都很好,我的代码通过了代码审查。然而,在我实现一项新功能后的一天,我的代码坏了。我拿走了我没有接触过的损坏的代码,并在 W3C 学校的测试地点复制了它,可以在这里找到。

http://www.w3schools.com/dom/tryit.asp?filename=try_dom_nodelist_item

只需将我的代码复制到那里并运行它。当您期望看到“5”时,您得到的输出为“2”,因为表中显然有五行。希望有大神能解答一下这个问题。提前致谢。

一些更可能有用的信息:我也在 Visual Studios 中运行它并调试它以查看发生了什么。显然,无论你放多少行,它总是会吐出 2,而且它吐出的两个对象都是空的。这有多奇怪??

<!DOCTYPE html>
<html>
<head>
</script>
</head>
<body>
            <h2><i>Albums</i></h2> 
            <table cellspacing="0" border="4" id = "table" class = "lazyProgressiveLoad">
                <tr style="font-style: italic; font-size: small; font-family: Segoe UI Light; color: Navy">
                    <th>--Id--</th>
                    <th>--Name--</th>
                    <th>--Description--</th>
                    <th><input type="button" value="Add Album" onclick="alert('Guru's Please Help!!!')" id = "addAlbum"/></th>
                </tr>
                <tr>
                    <td>Load, Search, or Add Albums to Get Started!</td>
                    <td>~~~</td>
                    <td>~~~</td>
                    <td>~~~</td>
                </tr>
                <tr>
                    <td>Load, Search, or Add Albums to Get Started!</td>
                    <td>~~~</td>
                    <td>~~~</td>
                    <td>~~~</td>
                </tr>
                <tr>
                    <td>Load, Search, or Add Albums to Get Started!</td>
                    <td>~~~</td>
                    <td>~~~</td>
                    <td>~~~</td>
                </tr>
                <tr>
                    <td>Load, Search, or Add Albums to Get Started!</td>
                    <td>~~~</td>
                    <td>~~~</td>
                    <td>~~~</td>
                </tr>
                <tr>
                </tr>
            </table>
<script>
window.onload = function () {
alert(parseInt(document.getElementById("table").childNodes.length));
}

</script>
</body>
</html>
4

3 回答 3

5

不,这不是 DOM 中的错误。您的tableHTML 没有tbody,因此浏览器会自动插入它。这两个节点可能是tbody和一个文本节点。

检查的简单方法是记录childNodes.

console.log(document.getElementById("table").childNodes);

或者单独记录它们。

var table = document.getElementById("table");
console.log(table.childNodes[0], table.childNodes[1]);

您可以通过该.rows属性直接访问所有表格行。

document.getElementById("table").rows

或者通过tBodies收藏。

document.getElementById("table").tBodies[0].rows
于 2012-09-25T17:03:53.997 回答
1

而不是childNodes尝试rows

alert(parseInt(document.getElementById("table").rows.length));

它应该得到正确的行。你也不必使用parseInt因为.length返回integer

于 2012-09-25T17:05:14.520 回答
0

我现在知道为什么我的程序中有这个错误。我原本 .children 曾经遍历我的 DOM 树,并且在某个时候,当我在我的程序中实现延迟加载时,.children 神奇地变成了 .childNodes ... 这破坏了我的代码,因为 .children 完全不同来自 .childNodes....

因此,这就是要摆脱的:

1) .rows -> 只给你一个表的所有行

2) .childNodes -> 为您提供直接子节点,甚至为您自动插入的子节点

3) .children -> 行为类似于行的功能,但它也适用于其他所有内容

于 2012-09-25T20:01:07.927 回答