Solved

Please explain difference between IE and Firefox in dom .childNodes length values.

Posted on 2006-06-22
3
449 Views
Last Modified: 2008-01-16
Here is a test html file.  (see below).  In IE it returns the number of child nodes for the row as 3, which is what I expected.  In firefox it returns the number of children as 7, which appears to be the number of all descendents, not just the number of children.  Is there an easy way of getting the number of children that will work in both IE and firefox?

==== code below ====
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
<head>
      <title>Untitled</title>
</head>

<body>
<table id="t" border="1">
<tr id="row1">
<td id="cell1">cell 1</td>
<td id="cell2"><div id="div1">cell 2 in div</div></td>
<td id="cell3"><div id="div2">cell 3 in div</div></td>
</tr>
</table>

<script type="text/javascript">var tr = document.getElementById("row1")
            document.write("number of childs:"+tr.childNodes.length)
</script>
</body>
</html>
0
Comment
Question by:Bob_j_Wallace
3 Comments
 
LVL 30

Accepted Solution

by:
GrandSchtroumpf earned 125 total points
ID: 16964817
That's because IE ignores the text nodes that separate your <td> elements.
This script shows the node types (3 = text node):

<script type="text/javascript">
  var tr = document.getElementById("row1")
  document.write("number of childs:"+tr.childNodes.length)
  var children = tr.childNodes;
  for (var i = 0; i < children.length; i++) {
    document.write("<br>childs node type:" + children[i].nodeType);
  }
</script>

remove the space chars between your <td> and you'll get the same results in all browsers:

<table id="t" border="1">
<tr id="row1"><td id="cell1">cell 1</td><td id="cell2"><div id="div1">cell 2 in div</div></td><td id="cell3"><div id="div2">cell 3 in div</div></td></tr>
</table>

You can use the DOM inspector in FF (menu tools/DOM inspector).  It will show you the text nodes.
0

Featured Post

VMware Disaster Recovery and Data Protection

In this expert guide, you’ll learn about the components of a Modern Data Center. You will use cases for the value-added capabilities of Veeam®, including combining backup and replication for VMware disaster recovery and using replication for data center migration.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Do you come here a lot? Are you lazy like me and don't want to go through the "trouble" of having to click your Dock's Safari icon and then having to click your Experts Exchange Favorites bookmark to get here? Well then this article is for you.
#Citrix #Internet Explorer #Enterprise Mode #IE 11 #IE 8
This Micro Tutorial will demonstrate how nuggets on the Web are formatted by using Chrome Developer Tools. These tools would not only view the site's CSS but it can also modify it and save the CSS to use on your own site.
Shows how to create a shortcut to site-search Experts Exchange using Google in the Chrome browser. This eliminates the need to type out site:experts-exchange.com whenever you want to search the site. Launch the Search Engine Menu: In chrome, via you…

810 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question