471,075 Members | 809 Online
Bytes | Software Development & Data Engineering Community
Post +

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 471,075 software developers and data experts.

childnode acess problem?

Hi,
I have a structure like this in my xhtml 1.0 file.
<body>
<div>
<a>
<img ... id="f1" />
<span>....</span><br/>
<span>....</span>
</a>
---> <div>
<img />
<span>....</span><br/>
<span>....</span>
</div>
---> <div>
<img />
<span>....</span><br/>
<span>....</span>
</div>
</div>
</body>

I want to acces the div blocks with the arrows from a java script. I use
the javas script object reference elment node. When somebody clicks on
the image with id f1, i want to make invisible the div elements with arrows.
I try to write this:

function make_visible(id_img){
document.getElementById(id_img).parentNode.parentN ode.childNodes[2].style.display="none";
document.getElementById(id_img).parentNode.parentN ode.childNodes[3].style.display="none";
}
but it does not work.

If i write :
document.getElementById(id_img).parentNode.parentN ode.childNodes[1].style.display="none";
after clicking the <a> block gets invisible. The next child will be the
div element. Isn't it?
I do not understand why it does not work, can anybody help me?

Jul 20 '05 #1
2 6882


Sergio del Amo Caballero wrote:
I have a structure like this in my xhtml 1.0 file.
<body>
<div>
<a>
<img ... id="f1" />
<span>....</span><br/>
<span>....</span>
</a>
---> <div>
<img />
<span>....</span><br/>
<span>....</span>
</div>
---> <div>
<img />
<span>....</span><br/>
<span>....</span>
</div>
</div>
</body>

I want to acces the div blocks with the arrows from a java script. I use
the javas script object reference elment node. When somebody clicks on
the image with id f1, i want to make invisible the div elements with
arrows.
I try to write this:

function make_visible(id_img){
document.getElementById(id_img).parentNode.parentN ode.childNodes[2].style.display="none";

document.getElementById(id_img).parentNode.parentN ode.childNodes[3].style.display="none";

}
but it does not work.

If i write :
document.getElementById(id_img).parentNode.parentN ode.childNodes[1].style.display="none";

after clicking the <a> block gets invisible. The next child will be the
div element. Isn't it?
I do not understand why it does not work, can anybody help me?


Don't rely on childNodes[index] to be an element node, in Mozilla's DOM
and in Opera 7's DOM the white space text nodes between element nodes
are modelled in the DOM while they are not in IE/Win therefore cross
browser code using childNodes[index] to expect a certain element doesn't
work. Instead use getElementsByTagName('tagname') and index that
collection, as long as you aware of nested elements appearing in there
too your code will work cross browser.
--

Martin Honnen
http://JavaScript.FAQTs.com/

Jul 20 '05 #2
DU
Sergio del Amo Caballero wrote:
Hi,
I have a structure like this in my xhtml 1.0 file.
<body>
<div>
<a>
<img ... id="f1" />
<span>....</span><br/>
<span>....</span>
</a>
---> <div>
<img />
<span>....</span><br/>
<span>....</span>
</div>
---> <div>
<img />
<span>....</span><br/>
<span>....</span>
</div>
</div>
</body>

I want to acces the div blocks with the arrows from a java script. I use
the javas script object reference elment node. When somebody clicks on
the image with id f1, i want to make invisible the div elements with
arrows.
I try to write this:

function make_visible(id_img){
document.getElementById(id_img).parentNode.parentN ode.childNodes[2].style.display="none";

document.getElementById(id_img).parentNode.parentN ode.childNodes[3].style.display="none";

}
but it does not work.

If i write :
document.getElementById(id_img).parentNode.parentN ode.childNodes[1].style.display="none";

after clicking the <a> block gets invisible. The next child will be the
div element. Isn't it?
I do not understand why it does not work, can anybody help me?


I'm just adding a few notes to what Martin replied to you.

Whitespace in the DOM:
"The presence of whitespace in the DOM can make manipulation of the
content tree difficult in unforseen ways. In Mozilla, all whitespace in
the text content of the original document is represented in the DOM (...)"
http://www.mozilla.org/docs/dom/technote/whitespace/

There are a number of ways to work around this Mozilla difficulty.
One would be to access the targeted node in a different manner. Here,
your instruction needs to travel 4 different node in the document tree.
So, even if the white space issue was not a problem, the code needed
would still involve a rather long DOM-Tree path. I personally would
examine this issue.
Second alternative would be to remove all white spaces involved. The
code used would work without adjustement for Mozilla-based browsers.
Also, removing white spaces makes the source document a bit faster to
parse and to render.
DU
--
Javascript and Browser bugs:
http://www10.brinkster.com/doctorunclear/
- Resources, help and tips for Netscape 7.x users and Composer
- Interactive demos on Popup windows, music (audio/midi) in Netscape 7.x
http://www10.brinkster.com/doctorunc...e7Section.html

Jul 20 '05 #3

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

1 post views Thread by Sergio del Amo Caballero | last post: by
1 post views Thread by Fabiano | last post: by
2 posts views Thread by anupamjain | last post: by
4 posts views Thread by gogo | last post: by
2 posts views Thread by =?Utf-8?B?bWFycmNoaWU=?= | last post: by
reply views Thread by leo001 | last post: by

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.