i don't understand how DOM counts up divRef.childNod es.length

[Jake Barnes]

This weekend I decided to play around with Javascript a little and try
to teach myself some things about AJAX and DOM. I've been doing
experiments on this page:

http://www.publicdomainsoftware.org/ajaxExperiment.htm

If you go there and click in any box, you'll get some controls. If you
then click "Add an Image" you'll have the chance to add an image. But
how many child elements are there in the box that communicates with
you? I count 4 items at most:

<div id="inputDiv">
<textarea id="inputBox" class="wonderfu l"></textarea><br />
<input id="submitButto n" type="button" value="Submit"
onClick="getInp ut();">
<input type="button" value="Cancel"
onClick="hideDi v('communicatio nBox');">
</div>

And yet, in the javascript code, when I try to get the number of child
elements, I get 8 in FireFox and 7 in IE. This is the code that
captures the info and I use alert() to make it visible:

var divRef = document.getEle mentById("input Div");
var firstChildNode = divRef.firstChi ld;
alert(divRef.ch ildNodes.length );
if (divRef.childNo des.length > 6) {
divRef.removeCh ild(firstChildN ode);
firstChildNode = divRef.firstChi ld;
}

Why am I getting 7 and 8 instead of 4? I don't get how the DOM is
counted.

[Ian Collins]

Jake Barnes wrote:

<div id="inputDiv">
<textarea id="inputBox" class="wonderfu l"></textarea><br />
<input id="submitButto n" type="button" value="Submit"
onClick="getInp ut();">
<input type="button" value="Cancel"
onClick="hideDi v('communicatio nBox');">
</div>

Why am I getting 7 and 8 instead of 4? I don't get how the DOM is
counted.

Check the node types, you will see number of TEXT nodes, representing
the whitespace.

--
Ian Collins.

[RobG]

Jake Barnes wrote:

This weekend I decided to play around with Javascript a little and try
to teach myself some things about AJAX and DOM. I've been doing
experiments on this page:

http://www.publicdomainsoftware.org/ajaxExperiment.htm

If you go there and click in any box, you'll get some controls. If you
then click "Add an Image" you'll have the chance to add an image. But
how many child elements are there in the box that communicates with
you? I count 4 items at most:
[...]
Why am I getting 7 and 8 instead of 4? I don't get how the DOM is
counted.

As Ian said, check the nodes - use the DOM inspector.

Gecko browsers will insert #text nodes to preserve whitespace in the
source document (after collapsing whitespace first).

<table>

<!-- this tr has one child - the td -->
<tr onclick="alert( this.childNodes .length);"><td> Show kids</td></tr>

<!-- this tr has two children - a #text and a td -->
<tr onclick="alert( this.childNodes .length);">
<td>Show kids</td></tr>

<!-- this tr has three children - a #text, td and #text -->
<tr onclick="alert( this.childNodes .length);">
<td>Show kids</td>
</tr>

</table>
But in IE all of them have just one child, the TD.

--
Rob

[Gérard Talbot]

Jake Barnes wrote :

[snipped]

Why am I getting 7 and 8 instead of 4? I don't get how the DOM is
counted.

Everything is explained in:

Whitespace in the DOM
http://developer.mozilla.org/en/docs...ace_in_the_DOM

Gérard
--
remove blah to email me