childNodes returns 2 not 1 children

[Ron Brennan]

Good evening.

<span id=fileList>
<input type=hidden name=file id=file_0 value=Name/>
</span>
....
document.getElementById(fileList).childNodes

The childNodes is giving me two children: 1) file_0 and 2) undefined.

I can't understand why there is not just file_0 or what the undefined child
is.

Anyone have any ideas? (Ignore any syntax errors - I stripped the code from
a servlet.)

Thanks,
Ron

 

[RobG]

Good evening.

<span id=fileList>
<input type=hidden name=file id=file_0 value=Name/>
</span>
...
document.getElementById(fileList).childNodes

The childNodes is giving me two children: 1) file_0 and 2) undefined.

I can't understand why there is not just file_0 or what the undefined child
is.

Anyone have any ideas? (Ignore any syntax errors - I stripped the code from
a servlet.)

Download Firefox (or Netscape or Mozilla) and use the DOM inspector.

In IE, a text node is inserted after the input element. In Firefox
(et al), text nodes are inserted after the span and the input and will
report ...childNodes.length = 3.

Try:

<input type="button" value="Show nodes..." onclick="
var x = document.getElementById('fileList').childNodes;
var t = [];
for ( var i=0; i<x.length; i++){
t = 'Node ' + i + ': ' + x.nodeName + '\n';
}
alert(t.join('\n'));
">
<span id="fileList">
<input type="hidden" name="file" id="file_0" value="Name" />
</span>

 

[Ron Brennan]

Good evening.

<span id=fileList>
<input type=hidden name=file id=file_0 value=Name/>
</span>
...
document.getElementById(fileList).childNodes

The childNodes is giving me two children: 1) file_0 and 2) undefined.

I can't understand why there is not just file_0 or what the undefined child
is.

Anyone have any ideas? (Ignore any syntax errors - I stripped the code from
a servlet.)

Download Firefox (or Netscape or Mozilla) and use the DOM inspector.

In IE, a text node is inserted after the input element. In Firefox
(et al), text nodes are inserted after the span and the input and will
report ...childNodes.length = 3.

Try:

<input type="button" value="Show nodes..." onclick="
var x = document.getElementById('fileList').childNodes;
var t = [];
for ( var i=0; i<x.length; i++){
t = 'Node ' + i + ': ' + x.nodeName + '\n';
}
alert(t.join('\n'));
">
<span id="fileList">
<input type="hidden" name="file" id="file_0" value="Name" />
</span>

Much appreciated Rob - thanks; My immediate problem turned out to be the
additional child was being created by a carriage return being generated by
the second println (I wrongly thought the servlet part to be irrelevant):

out.println("<td></td><td id='fileList'>");
out.println("<input type=\"hidden\" name=\"file\" id=\"file_0\"
value=\"Test Name\"/>");
out.println("</td>");

I've been working on this for days and found it within 5 minutes after
posting. Rob's information is something I didn't know and copied.

 

[RobG]

Much appreciated Rob - thanks; My immediate problem turned out to be the
additional child was being created by a carriage return being generated by
the second println (I wrongly thought the servlet part to be irrelevant):

out.println("<td></td><td id='fileList'>");
out.println("<input type=\"hidden\" name=\"file\" id=\"file_0\"
value=\"Test Name\"/>");
out.println("</td>");

I've been working on this for days and found it within 5 minutes after
posting. Rob's information is something I didn't know and copied.

The bottom line is that you need to be aware that different browsers
collapse whitespace differently. Any navigation you do up or down the
DOM tree should use a method that is independent of the number of
intervening nodes and not just assume that there are /x/ nodes between
here and there.

In the example you posted, getting to the first input from the span
could be:

// use getElementsByTagName
function getFirstChildInput( spanId ) {
if ( !docment.getElementById || !document.getElementsByTagName ) {
return null;
}
var x=document.getElementById(spanId).getElementsByTagName('input')
return ( x.length > 0 )? x[0] : null;
}


// walk down tree
function getFirstChildInput( spanId ) {
if ( !docment.getElementById ){return null}
var x = document.getElementById(spanId).childNodes;
var i = x.length;
while ( i-- ) {
if ( 'input' == x.nodeName.toLowerCase() ) {
return x;
}
}
return null; // or whatever if an input isn't found
}

 

[RobG]

RobG wrote:
[...]

Gahhh, always when you post...

// walk down tree
function getFirstChildInput( spanId ) {
if ( !docment.getElementById ){return null}
var x = document.getElementById(spanId).childNodes;
var i = x.length;
while ( i-- ) {
if ( 'input' == x.nodeName.toLowerCase() ) {
return x;
}

That will get the *last* input, the first is:

var i, j=x.length;
for ( i=0; i<j; i++ ) {
if ( 'input' == x.nodeName.toLowerCase() ) {
return x;
}

 

[Ron Brennan]

RobG wrote:
[...]

Gahhh, always when you post...

// walk down tree
function getFirstChildInput( spanId ) {
if ( !docment.getElementById ){return null}
var x = document.getElementById(spanId).childNodes;
var i = x.length;
while ( i-- ) {
if ( 'input' == x.nodeName.toLowerCase() ) {
return x;
}

That will get the *last* input, the first is:

var i, j=x.length;
for ( i=0; i<j; i++ ) {
if ( 'input' == x.nodeName.toLowerCase() ) {
return x;
}

}
return null; // or whatever if an input isn't found
}

Just checked in again, and picked up your advice and code. Many thanks
again, Ron

 

[Thomas 'PointedEars' Lahn]

In IE, a text node is inserted after the input element. In Firefox
(et al), text nodes are inserted after the span [...]

Nothing is *inserted* here. The text nodes *are there* just because of
the formatted source code. It is but that Firefox behaves (according to
the standards) while IE does not, removing whitespace text nodes on some
not well-defined occasions from its DOM which is clearly a Bad Thing.


PointedEars