Cha*_*les 0 html javascript dom
所以我完成了一个使用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>
不,这不是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