Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 13 of 13
  1. #1
    ubh
    ubh is offline
    Regular Coder ubh's Avatar
    Join Date
    Apr 2008
    Location
    Portland, Oregon U.S.A.
    Posts
    443
    Thanks
    108
    Thanked 15 Times in 14 Posts

    alert all element ids

    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

    Code:
    function compileCSS()
    {
    	x = document.getElementById('pallet').childNodes;
    	for (i=0;i<x.length;i++)
    	{
    	alert(x[i].id);
    	}
    }
    Last edited by ubh; 09-26-2008 at 06:34 AM. Reason: FIXED, READ MY LAST POST

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    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?
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • Users who have thanked _Aerospace_Eng_ for this post:

    ubh (09-25-2008)

  • #3
    ubh
    ubh is offline
    Regular Coder ubh's Avatar
    Join Date
    Apr 2008
    Location
    Portland, Oregon U.S.A.
    Posts
    443
    Thanks
    108
    Thanked 15 Times in 14 Posts
    currently there all div boxes but in up the road I will have all different types of elements with different id's.

  • #4
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Try
    Code:
    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 you are getting paid to do a job, don't ask for help on it!||||

  • Users who have thanked _Aerospace_Eng_ for this post:

    ubh (09-25-2008)

  • #5
    ubh
    ubh is offline
    Regular Coder ubh's Avatar
    Join Date
    Apr 2008
    Location
    Portland, Oregon U.S.A.
    Posts
    443
    Thanks
    108
    Thanked 15 Times in 14 Posts
    no go, still alerts just the first child node only.. this is weird.

  • #6
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Please post your html.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • Users who have thanked _Aerospace_Eng_ for this post:

    ubh (09-25-2008)

  • #7
    ubh
    ubh is offline
    Regular Coder ubh's Avatar
    Join Date
    Apr 2008
    Location
    Portland, Oregon U.S.A.
    Posts
    443
    Thanks
    108
    Thanked 15 Times in 14 Posts
    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.

    Code:
    <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?

  • #8
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    This should work.
    Code:
    <!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>
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • Users who have thanked _Aerospace_Eng_ for this post:

    ubh (09-25-2008)

  • #9
    ubh
    ubh is offline
    Regular Coder ubh's Avatar
    Join Date
    Apr 2008
    Location
    Portland, Oregon U.S.A.
    Posts
    443
    Thanks
    108
    Thanked 15 Times in 14 Posts
    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.

  • #10
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    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:
    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++]){
    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>
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • Users who have thanked Kor for this post:

    ubh (09-25-2008)

  • #11
    ubh
    ubh is offline
    Regular Coder ubh's Avatar
    Join Date
    Apr 2008
    Location
    Portland, Oregon U.S.A.
    Posts
    443
    Thanks
    108
    Thanked 15 Times in 14 Posts
    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.

    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;
    		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>
    Last edited by ubh; 09-25-2008 at 04:44 PM.

  • #12
    ubh
    ubh is offline
    Regular Coder ubh's Avatar
    Join Date
    Apr 2008
    Location
    Portland, Oregon U.S.A.
    Posts
    443
    Thanks
    108
    Thanked 15 Times in 14 Posts
    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:

    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>

  • #13
    ubh
    ubh is offline
    Regular Coder ubh's Avatar
    Join Date
    Apr 2008
    Location
    Portland, Oregon U.S.A.
    Posts
    443
    Thanks
    108
    Thanked 15 Times in 14 Posts

    Fixed!!

    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.

    Code:
    <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>
    Last edited by ubh; 09-26-2008 at 01:04 PM.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •