Home/ Questions/Q 8590065
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-11T23:12:29+00:00

So I finished a project using DOM to get data. Everything worked great, and

  • 0

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>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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

    • 0