J
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="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.
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.