DOM childNodes property : IE and Mozilla

Firedrill · June 6th, 2005, 03:41 PM

I'm new to the DOM and would like to clear up an inconsistancy between IE 6 and Mozilla 1.7.8. It seems the two browsers do not recognize the same number of child nodes/elements using the childNodes property. Why? The results of my script return the following...IE 6: 2 child nodes, First Node Type: 1, Second Node Type: 1
Mozilla 1.7.8:3 child nodes, First Node Type: 3, Second Node Type: 1

Code:

<html>
<head><title>Add paragraph to div</title>
<script language="javascript">

function Add_Content(){
   oBody = document.getElementsByTagName("body")[0];
   oDiv = oBody.getElementsByTagName("div")[0];
   addP = document.createElement("p");
   addText = document.createTextNode("New Paragraph of text added.");
   oDivChildren = oDiv.getElementsByTagName("p");

// If the div contains 2 or less "p" Elements add a new child "p" Element
if (oDivChildren.length <= 1)
 {
    addP.appendChild(addText);
    oDiv.appendChild(addP);
    oBody.appendChild(oDiv);
   }
 else
   { 
    alert ("The DIV tag contains " + oDiv.childNodes.length + " nodes.\n\n" 
+ "First Node Type: " + oDiv.childNodes[0].nodeType 
+ "\nSecond Node Type: " + oDiv.childNodes[1].nodeType);
   }
 }
// Mozilla 1.7.8 results:   3 nodes, First Node Type: 3, Second Node Type: 1
// IE 6 results:            2 nodes, First Node Type: 1, Second Node Type: 1
</script>
</head>
<body>
<p><a href="#" onclick="javascript:Add_Content();">Add</a> new content.</p>
<div>

</div>
</body>
</html>

Firedrill · June 6th, 2005, 07:53 PM

After further review, I have figured out why a text node(nodeType: 3) mysteriously appears in my script. I left a space between the opening and closing DIV tags. By removing the space between the DIV tags the script returns the same values for IE and Mozilla. It looks like Mozilla handles whitespace differently than IE. ???

nzakas · June 8th, 2005, 11:01 AM

You are correct. Mozilla treats whitespace as a text node while IE ignores extra whitespace before or after an element or other type of node. Using childNodes is difficult because of this. You can fix your problem by making sure the DIV is completely empty, like this:

HTML Code:

<div></div>

No whitespace = no child nodes in either browser.

Nicholas C. Zakas
Author, Professional JavaScript for Web Developers (ISBN 0764579088)
http://www.nczonline.net/