childnode acess problem?

Sergio del Amo Caballero · Oct 22, 2003

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.parentNode.childNodes[2].style.display="none";
document.getElementById(id_img).parentNode.parentNode.childNodes[3].style.display="none";
}
but it does not work.

If i write :
document.getElementById(id_img).parentNode.parentNode.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?

Martin Honnen · Oct 22, 2003

Sergio said:
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.parentNode.childNodes[2].style.display="none";

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

}
but it does not work.

If i write :
document.getElementById(id_img).parentNode.parentNode.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.

DU · Oct 22, 2003

Sergio said:
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.parentNode.childNodes[2].style.display="none";

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

}
but it does not work.

If i write :
document.getElementById(id_img).parentNode.parentNode.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/doctorunclear/Netscape7/Netscape7Section.html

Slideshow not working properly	2	Jan 7, 2023
Help with code	0	Jun 12, 2022
I am trying to detect Which image id="" was clicked ?	22	Jan 3, 2023
Buttons lining up	1	Feb 6, 2022
I am trying to make an audio player, how do I get the selected file to be playable?	5	Mar 29, 2022
Need help , Having problem with Drag n Drop ?	9	Dec 21, 2022
Need help , Having problem with Drag n Drop...	1	Dec 21, 2022
Set value after clicking in field	11	May 9, 2023

childnode acess problem?

Sergio del Amo Caballero

Martin Honnen

DU

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads