By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
455,776 Members | 1,397 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 455,776 IT Pros & Developers. It's quick & easy.

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

P: n/a
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.

Feb 7 '06 #1
Share this Question
Share on Google+
3 Replies


P: n/a
Jake Barnes wrote:

<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>

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.
Feb 7 '06 #2

P: n/a
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
Feb 7 '06 #3

P: n/a
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
Feb 7 '06 #4

This discussion thread is closed

Replies have been disabled for this discussion.