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

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="wonderful"></textarea><br />
<input id="submitButton" type="button" value="Submit"
onClick="getInput();">
<input type="button" value="Cancel"
onClick="hideDiv('communicationBox');">
</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.getElementById("inputDiv");
var firstChildNode = divRef.firstChild;
alert(divRef.childNodes.length);
if (divRef.childNodes.length > 6) {
divRef.removeChild(firstChildNode);
firstChildNode = divRef.firstChild;
}

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

re: i don't understand how DOM counts up divRef.childNodes.length

Jake Barnes wrote:[color=blue]
>
> <div id="inputDiv">
> <textarea id="inputBox" class="wonderful"></textarea><br />
> <input id="submitButton" type="button" value="Submit"
> onClick="getInput();">
> <input type="button" value="Cancel"
> onClick="hideDiv('communicationBox');">
> </div>[color=green]
> >[/color]
> Why am I getting 7 and 8 instead of 4? I don't get how the DOM is
> counted.
>[/color]
Check the node types, you will see number of TEXT nodes, representing
the whitespace.

--
Ian Collins.

re: i don't understand how DOM counts up divRef.childNodes.length

Jake Barnes wrote:[color=blue]
> 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:[/color]

[...]
[color=blue]
> Why am I getting 7 and 8 instead of 4? I don't get how the DOM is
> counted.[/color]

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

re: i don't understand how DOM counts up divRef.childNodes.length

Jake Barnes wrote :

[snipped]

[color=blue]
> Why am I getting 7 and 8 instead of 4? I don't get how the DOM is
> counted.[/color]


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