DOM node tree problem

javascrip DHTML DOM

[samdyk]

dear all can you help me identify this problem?
i have this HTML code
===========================================

<div id="container" class="box">
Hello World<br />
</div>

============================================

according to DOM specification i think the <div> element will have 2 child. 1 is text node and another is <br> element node

however when i use javascript to access this i can see three child in <div> element. 1 is text node, 2 <br> element node and 3 is another text node.

my javascript is

============================================

<script>

function getInfo(container)
{
var con = document.getElementById(container);
var info= document.getElementById("info");
for(i=0;i < con.childNodes.length;i++)
{
info.innerHTML = info.innerHTML + "Node Name "+con.childNodes[i].nodeName
+" "+"Node Value "+con.childNodes[i].nodeValue+"<br />";
}
}
</script>

can anyone explain me about this?

thanks you every much for your help

[daveVk]

Browsers have a habit of inserting empty text nodes in unexpected places, if you write it

<div id="container" class="box">Hello World<br /></div>

without extra white space it should go away, else ignore empty text nodes.

[Fotiman]

Yes, your example contains 3 child nodes. The first is a text node that contains a string consisting of a newline character followed by the text "Hello World". Note, the newline character is at the end of your opening tag.

Next is the <br /> element.

And the last text node consists of only a newline character (which is after your <br /> and before your closing </div> tag.

We often forget about these since in HTML whitespace is ignored.

[daveVk]

But of course IE does it different, search for "Inconsistent Whitespace Text Nodes in Internet Explorer"