...

View Full Version : Resolved alert all element ids



ubh
09-25-2008, 09:20 AM
Hi I am trying to create a function that will preform a loop over a chosen element and find all its childrens ids to alert them.
For some reason this only alerts the first child of my selected element to loop over.

Here is my code.. I am very new to looping so forgive me if its an obvious one :)



function compileCSS()
{
x = document.getElementById('pallet').childNodes;
for (i=0;i<x.length;i++)
{
alert(x[i].id);
}
}

_Aerospace_Eng_
09-25-2008, 09:28 AM
childNodes can also be text nodes so they won't have ids and I think cause the for loop to error out. Are your elements all the same except with different IDs or are they different elements altogether?

ubh
09-25-2008, 09:37 AM
currently there all div boxes but in up the road I will have all different types of elements with different id's.

_Aerospace_Eng_
09-25-2008, 09:40 AM
Try

function compileCSS()
{
x = document.getElementById('pallet').childNodes;
for (i=0;i<x.length;i++)
{
if(x[i].nodeType == 1)
{
alert(x[i].getAttribute('id'));
}
}
}

ubh
09-25-2008, 09:43 AM
no go, still alerts just the first child node only.. this is weird.

_Aerospace_Eng_
09-25-2008, 09:49 AM
Please post your html.

ubh
09-25-2008, 09:51 AM
Oh hey I have figured out why it was only alerting the first child of x and its because my child nodes are setup like the follow.



<div id="pallet">
<div id="firstChild">
<div id="firstGrandchild">
<div id="firstGreatGrandchild"></div>
</div>
<div id="secondGrandchild">
<div id="secondGreatGrandchild"></div>
</div>
<div id="thirdGrandchild">
<div id="thirdGreatGrandchild"></div>
</div>
</div>
</div>



So it was only alerting the first child because this infact is the only child of pallet.... might there be a way to alert even the nested elements?

_Aerospace_Eng_
09-25-2008, 09:59 AM
This should work.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript">
function compileCSS()
{
x = document.getElementById('pallet').childNodes;
for (i=0;i<x.length;i++)
{
if(x[i].nodeType == 1)
{
alert(x[i].getAttribute('id'));
if(x[i].hasChildNodes())
{
var y = x[i].childNodes;
for(j = 0; j < y.length; j++)
{
if(y[j].nodeType == 1)
{
alert(y[j].getAttribute('id'));
}
}
}
}
}
}
window.onload = function()
{
compileCSS();
}
</script>
</head>

<body>
<div id="pallet">
<div id="firstChild">
<div id="firstGrandchild">
<div id="firstGreatGrandchild"></div>
</div>
<div id="secondGrandchild">
<div id="secondGreatGrandchild"></div>
</div>
<div id="thirdGrandchild">
<div id="thirdGreatGrandchild"></div>
</div>
</div>
</div>
</body>
</html>

ubh
09-25-2008, 10:10 AM
This is defiantly getting somewhere.
However keeping in mind that there will be more elements added to my document down the line, and even deeper element nesting.

There would be no way to just preform a single loop over all nested elements?

The code you have here will only go so deep in the nesting.

I really appreciate all your help m8!
Thanks.

Kor
09-25-2008, 03:29 PM
use getElementsByTagName() method and a wild card (*)
This should work no matter the deep of the nesting, no matter whether all the elements have ids or not:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<script type="text/javascript">
function compileCSS(){
var idC=[]
var ele=document.getElementById('pallet').getElementsByTagName('*'), i=0, e;
while(e=ele[i++]){
e.getAttribute('id')?e.getAttribute('id').length>0?idC[idC.length]=e.getAttribute('id'):null:null;
}
return idC;
}
onload=function(){
alert(compileCSS());
}
</script>
</head>
<body>
<div id="pallet">
<div id="firstChild">
<div id="firstGrandchild">
<div id="firstGreatGrandchild"></div>
</div>
<div id="secondGrandchild">
<div id="secondGreatGrandchild"></div>
</div>
<div>no id</div>
<div id="thirdGrandchild">
<div id="thirdGreatGrandchild"></div>
</div>
</div>
</div>
</body>
</html>

ubh
09-25-2008, 05:27 PM
excellent Kor as always!!

might you shed a little more light on how to alter this to exclude elements that don't have Ids?

here is what I have expanded this into, it grabs both the ID and STYLE attributes from all elements and displays the output in a text box.
But as you can see for this purpose, I don't need to find elements that don't have Id's.

This example only works in FF right now due to IE calling every elements style attribute null.



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<script type="text/javascript">
function compileCSS(){
var idC=[]
var ele=document.getElementById('pallet').getElementsByTagName('*'), i=0, e;
while(e=ele[i++])
{
var elementIds = e.getAttribute('id')?e.getAttribute('id').length>0?idC[idC.length]=e.getAttribute('id'):null:null;
var elementAttributes = e.getAttribute('style')?e.getAttribute('style').length>0?idC[idC.length]=e.getAttribute('style'):null:null;
alert(elementAttributes);
var makeCssTextNode = document.createTextNode("#" + elementIds + "\n" + "{" + "\n" +elementAttributes + "\n" + "}" + "\n");
var getCssBox = document.getElementById("cssBox");
getCssBox.appendChild(makeCssTextNode);
}
}
</script>
</head>
<body>
<button type="button" onclick="compileCSS()">Compile CSS</button>
<div id="pallet">
<div id="firstChild" style="float:left;">
<div id="firstGrandchild" style="float:left;">
<div id="firstGreatGrandchild" style="float:left;"></div>
</div>
<div id="secondGrandchild" style="float:left;">
<div id="secondGreatGrandchild" style="float:left;"></div>
</div>
<div>no id</div>
<div id="thirdGrandchild" style="float:left;">
<div id="thirdGreatGrandchild" style="float:left;"></div>
</div>
</div>
</div>
<textarea id="cssBox" style="position:absolute; width:100&#37;; height:256px; bottom:0px;
left:0px;"></textarea>
</body>
</html>

ubh
09-26-2008, 06:32 AM
Ok I got the script to allow only elements with id's but I still cant figure out with your method kor how to make IE get each found elements styles.

Right now if you run it on IE each elements styles are null but again FF is working perfectly...

please anyone?


here is my code:



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<script type="text/javascript">
function compileCSS(){
var idC=[]
var ele=document.getElementById('pallet').getElementsByTagName('*'), i=0, e;
while(e=ele[i++])
{
var elementIds = e.getAttribute('id')?e.getAttribute('id').length>0?idC[idC.length]=e.getAttribute('id'):null:null;
var elementAttributes = e.getAttribute('style')?e.getAttribute('style').length>0?idC[idC.length]=e.getAttribute('style'):null:null;
if(elementIds.value == elementIds.value)
{
alert(elementAttributes);
var makeCssTextNode = document.createTextNode("#" + elementIds + "\n" + "{" + "\n" +elementAttributes + "\n" + "}" + "\n\n");
var getCssBox = document.getElementById("cssBox");
getCssBox.appendChild(makeCssTextNode);
}
}
}
</script>
</head>
<body>
<button type="button" onclick="compileCSS()">Compile CSS</button>
<div id="pallet">
<div id="firstChild" style="float:left;">
<div id="firstGrandchild" style="float:left;">
<div id="firstGreatGrandchild" style="float:left;"></div>
</div>
<div id="secondGrandchild" style="float:left;">
<div id="secondGreatGrandchild" style="float:left;"></div>
</div>
<div>no id</div>
<div style="color:#666;">no id with styles</div>
<div id="thirdGrandchild" style="float:left;">
<div id="thirdGreatGrandchild" style="float:left;"></div>
</div>
</div>
</div>
<textarea id="cssBox" style="position:absolute; width:100%; height:256px; bottom:0px;
left:0px;"></textarea>
</body>
</html>

ubh
09-26-2008, 07:31 AM
Thanks Aerospace Eng and Kor!!

I finally got it it to work!

So to recap it searches all nested elements of a root element.
Gathers an id if one is present from each element as well as any inline styles (IE Fix).
Appends the results to a textarea and converts text to lower case (IE Fix).

now can you say xmlHTTPRequest post to file on server. ;)

here is the script.



<script type="text/javascript">
function compileCSS()
{
//CLEARS TEXT BOX
var clearCssBox = document.getElementById('cssBox').innerText = "";

var ele=document.getElementById('pallet').getElementsByTagName('*'), i=0, e;
while(e=ele[i++])
{
var elementIds = e.id;
var elementStyles = e.getAttribute('style');
if(elementIds == 0){}
else
{
if (typeof elementStyles == 'string')
{ // what FF returns
var makeCssTextNode = document.createTextNode("#" + elementIds + "\n" + "{" + "\n" + elementStyles + "\n" + "}" + "\n");
var getCssBox = document.getElementById("cssBox");
getCssBox.appendChild(makeCssTextNode);
}

else if (typeof elementStyles == 'object')
{ // what IE returns
elementStyles = elementStyles.cssText;
var makeCssTextNode = document.createTextNode("#" + elementIds + "\n" + "{" + "\n" + elementStyles + "\n" + "}" + "\n");
var getCssBox = document.getElementById("cssBox");
getCssBox.appendChild(makeCssTextNode);
}
}
}
//CONVERT ALL TO LOWSER CASE (IE FIX)
var readCssBox = document.getElementById("cssBox").value;
var fixCssBox = readCssBox.toLowerCase();
var readCssBox = document.getElementById("cssBox").value = fixCssBox;

//SEPARATE EACH STYLE
var rawCss = document.getElementById("mainCSSBox").value;
var fixedCss = rawCss.replace(/;/g,';\n');
document.getElementById("mainCSSBox").value = fixedCss;
}
</script>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum