View Full Version : find all divs whose elementId contains a substring

03-21-2005, 02:01 AM
Hi - I have a page with a lot of divs which I'd like to hide, and then show just the one whose link I click.

The function is like this:

function switchLayer(selectedLayer)
document.getElementById('findOnlyElementsWhoseIdBeginsWithStringXXX').style.visibility = 'hidden';
document.getElementById('container_' + selectedLayer).style.visibility = 'visible';
return false;

this would eliminate the need to separately hide each layer. How can I write the code so the getElementById returns all elements whose ID begins with 'mystring'?



03-21-2005, 02:53 AM
I am also trying getElementsByTagName

and giving each div a name="container"


document.getElementsByTagName('container').style.visibility = 'hidden';

but Netscape's javascript console tells me

Error: document.getElementsByTagName("container").style has no properties

What am I doing wrong?

03-21-2005, 10:45 AM
tagName is different than name, and the name attribute is for form elements.

There are "getElementsByTagName", or "getElementsByName" methods.

They both return a collection. A particular item in the collection is accessed by index, like an array [0], [1], [2], etc., or using the item property of the collection item(0), item(etc.).

About your first question, getElementById does not return a collection, so you will have to loop a collection of elements, and check the id property of each item, or something...

03-21-2005, 02:23 PM
Thank you - that makes sense.

03-21-2005, 02:39 PM
Really? ;) Great!

03-21-2005, 03:18 PM
function switchLayer(selectedLayer)
myContainerArray = document.getElementsByName('container');
for (i=0; i < myContainerArray.length; i++)
**myContainerArray[i].style.visibility = 'hidden';
document.getElementById('container_' + selectedLayer).style.visibility = 'visible';

Each layer I want turned on and off (there's a lot of them)has an ID:
id="container_art" or "container_css"

And each layer has a name:

So it loops through and grabs ALL divs whose name is 'container' and sets their visibility to "hidden"
then it turns on just the one layer I want.

03-21-2005, 04:03 PM
Sounds good. :)

Regarding the name attribute, a *more valid* way may be to use getElementsByTagName to get a collection; for example, if all elements were contained in an outer div, one could give that an id, like <div id="container">... and get its collection using:

var myContainerCollection = document.getElementById("container").getElementsByTagName("*");
... or a specific tag name if those are all alike.

03-21-2005, 06:36 PM
I've discovered a problem - it seems to NOT hide all the divs every time. I'm not sure why.

The test page is at:


This doesn't have to do with the change I just made - it was doing this even without the surrounding div you suggested.

Oh well - maybe I'll do this by simply listing all the divs I want to hide.

03-21-2005, 06:57 PM
It looks like you're not distinguishing between a "name" and a "tag name" the tag name is the name of the element's tag, not its name attribute, so using getElementsByTagName("container") is bound to fail...

03-21-2005, 07:21 PM
I have tried it with getElementsByName and it seems to not behave correctly that way either.

Thanks though!

03-21-2005, 08:01 PM
It's a simple matter... you are doing something wrong (but I haven't the will to prove it). :D

03-22-2005, 03:32 AM
All day, I had been testing this on IE for PC, and was in despair. Then I tried the same page on Safari - seems to work well. Also works well on Netscape for Mac. Could be Safari and NS are more tolerant of my errors, or IE is very picky.

Anyway, thanks very much for your help.

Harry Armadillo
03-22-2005, 05:04 AM
Run this snippet in both IE and Firefox, and you should see why IE isn't working.
<div id='anId' name='aName'>a lonely div</div>
alert("document.getElementsByName('anId')= " +document.getElementsByName('anId').length+
"\ndocument.getElementsByName('aName')= "+document.getElementsByName('aName').length+
"\ndocument.getElementById('anId')= " +document.getElementById('anId')+
"\ndocument.getElementById('aName')= "+document.getElementById('aName') );
You're going to need to make an onload function builds an array of your container divs for later use.

03-22-2005, 04:20 PM
Yeah, it alerted like this:


in other words, it is interpreting the Id as a Name in this case. And basically ignoring the "Name" I have set for the div.

According to this post (http://www.codingforums.com/archive/index.php/t-47800)

and also according to codegoboom,

IE interprets the getElementsByName only when the element is a form control, like input or select or whatever. Other browsers interpret it differently I guess.

So I will try loading them all as an array first.

Thanks everyone.

Mr J
03-22-2005, 07:48 PM
How about this way

<TITLE>Document Title</TITLE>

<script type="text/javascript" language="javascript">

function show_me(id){







<div style="font-size:12px">
<a href="#null" onclick="show_me('div1')">Article One</a><BR>
<a href="#null" onclick="show_me('div2')">Article Two</a><BR>
<a href="#null" onclick="show_me('div3')">Article Three</a><BR>
<a href="#null" onclick="show_me('div4')">Article Four</a><BR>

<div id="div1" class="article">
<h1>Article One</h1>

<div id="div2" class="article">
<h1>Article Two</h1>

<div id="div3" class="article">
<h1>Article Three</h1>

<div id="div4" class="article">
<h1>Article Four</h1>


Willy Duitt
03-22-2005, 09:01 PM
<script type="text/javascript">
function switchLayer(selectedLayer){
// Written By: WillyDuitt@hotmail.com || 03-22-2005 \\;
var div = document.getElementsByTagName('div');
for(var i=0; i<div.length; i++){
div[i].style.visibility = 'hidden';

document.getElementById('surroundingDiv').style.visibility = 'hidden';
document.getElementById(RegExp.$1+selectedLayer).style.visibility = 'visible';


BTW: You should be using display:none/block rather than visibility:hidden/visible so that the elements do not take up any room on the page which would remove all that whitespace at the bottom of the document...


03-22-2005, 11:23 PM
Thanks - can't wait to get home and try all this!

03-23-2005, 11:41 PM
First THANK you for giving me that regular expression for stripping everything off after "container_". I tried to figure out the correct syntax for that, but am new to regexp and failed miserably. That was going to be my first direction for doing this - I wanted to use the ID tag for everything, both hiding and showing the container divs.

However, when that failed, I started looking into using the "name" attribute instead of the "id" attribute for one of the two functions. You just made that unnecessary! YAY!

Anyway - with regard to the use of whatever.style.display="none" and whatever.style.display="block" instead of style.visibility="hidden" and style.visibility="visible", it works fine at hiding the divs but the selected one does not show up - and this is in all browsers, FF, Safari, NS, and IE for PC.

Am I missing something in the way we have the function set up that is preventing it from displaying as a block? I'm not sure why this would not work same as visibility? It will be less of an issue once I put the real content in because none of the divs is going to be that long -I'll make sure of it. However it would be nice to understand what is going on.

Willy Duitt
03-24-2005, 12:02 AM
You can not just change the display property in the script without changing the visibility property in your style sheet (I'm assuming you have a style sheet and not using inline) from visibilty to using display...

I never tried using both visibility and display at the same time but assume that is your problem...
In other words, you are now intially hiding the divisons using the visibility property:hidden...
Changing the dispaly to block is not changing the visibility...


03-24-2005, 12:10 AM
I assumed "none" meant NONE, and actually it seems to. But the reverse is not true, apparently. Display "block" doesn't necessarily mean "display ON"

Thanks, will try again.

The styles are indeed going to be in a separate style sheet. Currently they're at the top of the document for convenience, but they'll be moved out when I'm done setting this up.

Willy Duitt
03-24-2005, 12:17 AM
Display and visibility are two distinctively different properties...

Visibility: hidden/visible will toggle between the hidden and visible, but the element will still take up the necassary space on the page...

Display: none/block will toggle between being visible or not (with block being visible), but the element(s) will be completely removed from the flow of the document and will not reserve nor take up any space on the page...

Your current use of the visibility property is what is causing all that white space at the bottom of your document...


03-24-2005, 04:02 AM
You were right - it is now gone!