CODEWITHSUNDEEP
javascripthtmldom
Charles
Charles

Reputation: 490

Javascript - BUG in the DOM?

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>

Upvotes: 0

Views: 138

Answers (3)

Charles
Charles

Reputation: 490

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

Upvotes: 0

Muthu Kumaran
Muthu Kumaran

Reputation: 17910

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.

Upvotes: 1

I Hate Lazy
I Hate Lazy

Reputation: 48761

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

Upvotes: 5

Related Questions