Accessing childNode properties ?

[viveklinux]

Hi,

Have a page where there are multipe DIVs present in a single row of a
table. Only one DIV has to be displayed corresponding to the link
clicked on the menu. Using the following Javascript function :

function hideandshow (entity)
{
var parentNode = document.getElementById (entity).parentNode ;
var len = parentNode.childNodes.length ;
for ( var i = 0 ; i < len ; i++ )
{
......
}

}

The argument passed 'entity' is the id of the DIV which needs to be
displayed. The child nodes returned are not just DIVs but other objects
as well. How can i access the style.display property of the DIVs and
make sure that only the entity DIV is displayed and the rest are
invisible.

Thanks in advance,
vivekian

 

[RobG]

Hi,

Have a page where there are multipe DIVs present in a single row of a
table. Only one DIV has to be displayed corresponding to the link
clicked on the menu. Using the following Javascript function :

function hideandshow (entity)
{
var parentNode = document.getElementById (entity).parentNode ;

Please don't use tabs for indents, use 2 or 4 spaces.

var len = parentNode.childNodes.length ;
for ( var i = 0 ; i < len ; i++ )
{
......
}

var div = document.getElementById (entity);
var els = el.parentNode.childNodes;
var len = els.length;
var el;
for (var i=0; i<len; i++)
{
el = els;
if (el.style){
if (el == div){
el.style.display = '';
} else {
el.style.display = 'none';
}
}
}

}

The argument passed 'entity' is the id of the DIV which needs to be
displayed. The child nodes returned are not just DIVs but other objects
as well. How can i access the style.display property of the DIVs and
make sure that only the entity DIV is displayed and the rest are
invisible.

If 'parentNode' only contains divs and whitespace, then you might use:

var els = el.parentNode.getElementsByTagName('div');

to get only the div elements and skip #text nodes representing
whitespace in some browsers.

 

[RobG]

RobG wrote:
[...]

var div = document.getElementById (entity);
var els = el.parentNode.childNodes;

That should, of course, be:

var div = document.getElementById(entity);
var els = div.parentNode.childNodes;

 

[vivekian]

Hi,

Have a page where there are multipe DIVs present in a single row of a
table. Only one DIV has to be displayed corresponding to the link
clicked on the menu. Using the following Javascript function :

function hideandshow (entity)
{
var parentNode = document.getElementById (entity).parentNode ;

Please don't use tabs for indents, use 2 or 4 spaces.

var len = parentNode.childNodes.length ;
for ( var i = 0 ; i < len ; i++ )
{
......
}

var div = document.getElementById (entity);
var els = el.parentNode.childNodes;
var len = els.length;
var el;
for (var i=0; i<len; i++)
{
el = els;
if (el.style){
if (el == div){
el.style.display = '';
} else {
el.style.display = 'none';
}
}
}

}

The argument passed 'entity' is the id of the DIV which needs to be
displayed. The child nodes returned are not just DIVs but other objects
as well. How can i access the style.display property of the DIVs and
make sure that only the entity DIV is displayed and the rest are
invisible.

If 'parentNode' only contains divs and whitespace, then you might use:

var els = el.parentNode.getElementsByTagName('div');

to get only the div elements and skip #text nodes representing
whitespace in some browsers.

Thanks Rob !! ..worked like a charm