access IDs of page elements

sundemon · Jan 16, 2003

Hi,
Is there a way to dynamically access the array of elementsById from a page/document?

Here is an example:

<html>
<head>
<script language='javascript'>
function showListofIDs(){
//?????? show/alert() array or list of div IDs?
}
</script>
</head>
<body onload="showListofIDs();">
<div id="firstDiv"></div>
<div id="secondDiv"></div>
<div id="thirdDiv"></div>
</body>
</html>

What I'd like to do is be able to access or loop through all elements (i.e. ["firstDiv","secondDiv","thirdDiv"])on a given page (to say, change visibilty or position, etc.) without having to create an array of div IDs in advance, or have to manually update that array if I add or subtract elements to the page.

Any suggestions for code or tutorials on the subject?

Thanks,
sundemon

Targol · Jan 16, 2003

That works under ie6 :

Code:

<html>
<head>
<title>Listing Id's</title>
<script language='javascript'>
function showListofIDs(){
  var oBody = document.getElementById(&quot;myBody&quot;);
  var lstNodes = oBody.childNodes;
  for (i=0; i<lstNodes.length;i++) {
    var oTmp=lstNodes.item(i);
    alert (&quot;Object number &quot; + (i+1) + &quot; 's id = &quot; + oTmp.id);
  }
}
</script>
</head>
<body id=&quot;myBody&quot; onload=&quot;showListofIDs();&quot;>
<div id=&quot;firstDiv&quot;></div>
<div id=&quot;secondDiv&quot;></div>
<div id=&quot;thirdDiv&quot;></div>
</body>
</html>

Water is not bad as long as it stays out human body ;-)

Supra · Jan 16, 2003

That's ok if you want every single tag in the body that has an ID. But my code is much more specific. Simply specify the tag type and the ID's for all tags of that type will be reported. Like: getTags('div') will return the id's of all div tags in the document.

Code:

<script>
<!--
function getTags(tag) {
	divTags = document.all.tags(tag);
	alert(divTags.length+&quot; tags were found.&quot;);
		for (i=0; i<divTags.length; i++) {
			alert(divTags[i].id);
		}
}
//-->
</script>

<body onload=&quot;getTags('div')&quot;>

<div id=&quot;firstDiv&quot;></div>
<div id=&quot;secondDiv&quot;></div>
<div id=&quot;thirdDiv&quot;></div>

Targol · Jan 16, 2003

Beware Supra :

Code:

document.all

is not cross browser code. Water is not bad as long as it stays out human body ;-)

Supra · Jan 16, 2003

That works under ie6 : <---- Look familiar?

Targol · Jan 16, 2003

Don't get nervous Supra ;-). That was to help. I'm sure that

Code:

document.all

doesn't work under netscape browsers (except last version I think). I could only test my code under IE6 because... it's the only browser I've got but accessing elements by

Code:

getElementById

is cross browsers as far as I know. Water is not bad as long as it stays out human body ;-)

sundemon · Jan 16, 2003

Thanks for all the replies.
I'll try these this evening.
sundemon

sundemon · Jan 16, 2003

hi again,
OK, targol's script works in IE and NS, but w/ a wierd result:
The code shows 7 alerts, and all the odd numbered alerts are "undefined". I suppose I could make a work around, but what's going on here? I'm a little behind on my newer additions to JavaScript (e.g. oBody.childNodes, etc.), can you recommend a good tutorial or other sources?
supra's code produces exactly the result I'm looking for, but not in N6+. Too bad, I really was hoping for a NS/IE solution.
Any hope?
Thanks again for all the help.
sd

Targol · Jan 16, 2003

For "undefined" alerts, are you sure that you set the id attribute for all your divs ? (beware that id attribute MUST be unique for a whole page!!!).
For tutorial, you can see dev guru :

http://www.devguru.com/

Water is not bad as long as it stays out human body ;-)

sundemon · Jan 17, 2003

targol,
it appears all are defined and unique; the result I got is from copy/pasting your example.
What exactly are oBody.childNodes? I'm experimenting trying to show them w/ alerts and can't get a result. Why is oBody.childNodes.length = 6 in our example?
sorry for the pop-quiz...
sd

sundemon · Jan 17, 2003

OK, I've been meesing around and this works in IE:

<html>
<head>
<title>Listing Id's</title>
<script language='javascript'>
function showListofIDs(){
for(i=0;i<document.body.childNodes.length;i++){
if(document.body.childNodes.id){
document.write(document.body.childNodes.id+"<br>&quot
}
}
}
</script>
</head>
<body onload="showListofIDs();">
<div id="firstDiv"></div>
<div id="secondDiv"></div>
<div id="thirdDiv"></div>
</body>
</html>

bit in NS the result is only "firstDiv". The rest of the loop doesn't show.

sd

sundemon · Jan 17, 2003

I'm not sure why, but this works...

<html>
<head>
<title>Listing Id's</title>
<script language='javascript'>
var d=document;
var htmString="";
function randomNumber(val){
return Math.ceil(Math.random(val)*10)
}
for(var i=0;i<randomNumber(10);i++){
htmString+='<div id="div'+i+'">this is div '+i+'</div>';
}
d.write(htmString+"<br>&quot

;
d.close();
function showListofIDs(){
var divs=new Array();
for(var ii=0,x=0;ii<(document.body.childNodes.length-2);ii++){
divs[x]=document.body.childNodes[ii].id;
x++;
}
alert(divs);
}
</script>
</head>
<body onload="showListofIDs();">
</body>
</html>

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

access IDs of page elements

sundemon

Programmer

Targol

Technical User

Supra

Programmer

Targol

Technical User

Supra

Programmer

Targol

Technical User

sundemon

Programmer

sundemon

Programmer

Targol

Technical User

sundemon

Programmer

sundemon

Programmer

sundemon

Programmer

Similar threads

Part and Inventory Search

Sponsor