Javascript - BUG in the DOM?
Question
So I finished a project using DOM to get data. Everything worked great, and my code passed code review. However, one day after I implemented a new feature my code broke. I took the broken code which I havn't touched and replicated it at W3C schools testing location that can be found here.
http://www.w3schools.com/dom/tryit.asp?filename=try_dom_nodelist_item
Simply Copy My Code into there and run it. You get the output as "2", when you'd expect to see "5", since there is obviously five rows in the table. I hope some guru can answer this question. Thanks in advance.
Some more potentially helpful information: I ran this in Visual Studios as well and debugged it to see what was going on. Apparently, no matter how many rows you put it, it's always going to spit out 2, and on top of that the two objects it spits out is both null. How weird is this??
<!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>
3 answers
solution1
5 2012-09-25 17:03:53
No it's not a bug in the DOM. Your table HTML doesn't have a tbody , so the browser inserts it automatically. The two nodes are likely the tbody and a text node.
Simple way to check would be to log the childNodes .
console.log(document.getElementById("table").childNodes);
Or log them individually.
var table = document.getElementById("table");
console.log(table.childNodes[0], table.childNodes[1]);
You can get to all the table rows directly via the .rows property.
document.getElementById("table").rows
Or through the tBodies collection.
document.getElementById("table").tBodies[0].rows
solution2
1 2012-09-25 17:05:14
instead of childNodes try with rows
alert(parseInt(document.getElementById("table").rows.length));
It should get correct rows. Also you don't have to use parseInt because .length returns integer .
solution3
0 ACCPTED 2012-09-25 20:01:07
I know now why there was this bug in my program. I had originally .children used to traverse through my DOM tree, and at some point or another when I was implementing Lazy Load into my program, .children magically changed into .childNodes... which broke my code, because .children is totally different from .childNodes....
So this is what to take away from this:
1) .rows -> Gives you all the rows of a table only
2) .childNodes -> Gives you the immediate child Nodes even the automatically inserted ones for you
3) .children -> Acts similar to rows's functionality except it works for everything else as well
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.