firstNode problems

[yawnmoth]

I'm having some problems making the following work in both Internet
Explorer and Firefox:

http://www.frostjedi.com/terra/scripts/demo/childNodes.html

What it should do (and indeed, what it does do, in Internet Explorer)
is show a gray box. In Firefox, however, it shows a black box.

To explain the commented out code... I've observed that using the
childNode at index 1 does the samething that in Firefox that both
firstChild and the childNode at index 0 do in Internet Explorer. As
such, the above webpage can be easily made to work in Firefox, but once
done, it won't work in Internet Explorer, and vice versa. I'd like to
make it work in both browsers. Without giving the img element it's own
id.

Any ideas as to how I can do this would be appreciated. Thanks!

 

[web.dev]

I'm having some problems making the following work in both Internet
Explorer and Firefox:

http://www.frostjedi.com/terra/scripts/demo/childNodes.html

What it should do (and indeed, what it does do, in Internet Explorer)
is show a gray box. In Firefox, however, it shows a black box.

To explain the commented out code... I've observed that using the
childNode at index 1 does the samething that in Firefox that both
firstChild and the childNode at index 0 do in Internet Explorer. As
such, the above webpage can be easily made to work in Firefox, but once
done, it won't work in Internet Explorer, and vice versa. I'd like to
make it work in both browsers. Without giving the img element it's own
id.

Any ideas as to how I can do this would be appreciated. Thanks!

Remove all whitespaces / tabs from your div. For example:

<div id = "main"><img src = "blank.gif"></div>

Then you can use index 0 for both. In Firefox, text nodes count as a
child node whereas in IE it doesn't.

 

[yawnmoth]

yawnmoth wrote:
<snip>

Remove all whitespaces / tabs from your div. For example:

<div id = "main"><img src = "blank.gif"></div>

Then you can use index 0 for both. In Firefox, text nodes count as a
child node whereas in IE it doesn't.

Didn't know that. Thanks, web.dev and Martin Kurz!

 

[ASM]

yawnmoth a écrit :

I'm having some problems making the following work in both Internet
Explorer and Firefox:

http://www.frostjedi.com/terra/scripts/demo/childNodes.html

error :
document.getElementById('main').firstChild.style
has no property (IE and FF)

firstChild is not a tag, shown by :
alert(document.getElementById('main').firstChild.tagName)
and can't be styled

What it should do (and indeed, what it does do, in Internet Explorer)
is show a gray box. In Firefox, however, it shows a black box.

Are you realy absolutly sure ?
because :

alert('cN[1] = '+document.getElementById('main').childNodes[1].tagName);
document.getElementById('main').childNodes[1].style.background = '#aaa';

give same results in my FF and IE ... ! ?


if you write your html code this way :
<div id="main"><img
src="blank.gif" width="30" height="30" style="background: #000" />
</div>
(no space or return between <div> and <img )

this time
childNodes[0]
or
firstChild
are correct

 

[ASM]

web.dev a écrit :

Remove all whitespaces / tabs from your div. For example:

<div id = "main"><img src = "blank.gif"></div>

Then you can use index 0 for both. In Firefox, text nodes count as a
child node whereas in IE it doesn't.

depends ...
with example given my IE (Mac) works as my FF

 

[RobG]

Didn't know that. Thanks, web.dev and Martin Kurz!

Depending on the removal of whitespace is not very robust - a single
space will break your code in some browsers. Consider either wandering
along the child nodes until you find the one you are after:

var imgImAfter = document.getElementById('main').firstChild;
while ( 'img' != imgImAfter.nodeName.toLowerCase()
&& imgImAfter.nextSibling ){
imgImAfter = imgImAfter.nextSibling;
}

or using getElementsByTagName('img') inside the div and grab the first
element:

var theDiv = document.getElementById('main');
var imgImAfter = theDiv.getElementsByTagName('img')[0];

Of course both examles need a bit of error checking added.

 

[Lasse Reichstein Nielsen]

In Firefox, text nodes count as a child node whereas in IE it
doesn't.

Text nodes counts as children in IE as well, except *some* cases where
the text node would contain only whitespace.

In the following:

<div> <em> <b>x</b><u> </u></div>

there is no text node between <div> and <em>, nor between <em> an <b>.
There is one between <u> and </u>, it's just not visible.

/L