943,562 Members | Top Members by Rank

Web Development > JavaScript / DHTML / AJAX > Working with getElementsWithTagName()
Ad:
You are currently viewing page 1 of this multi-page discussion thread
Permalink
Aug 20th, 2009
0

Working with getElementsWithTagName()

Expand Post »
Hi to everyone, i'm new to javascript and to daniweb, what i want to do is to put all the properties from all the divs of the page, to all their child elements, this way, for example.

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
  1. <div style="background-color: #000000">
  2. <b>Text</b>
  3. </div>

would change (using javascript)


JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
  1. <div>
  2. <b style="background-color: #000000">Text</b>
  3. </div>



what i've done for now is the following code:

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
  1. <script languaje=""JavaScript"" type=""text/javascript"">
  2. var x = document.getElementsByTagName('DIV');
  3. for(cont = 0; cont < x.length; cont++)
  4. {
  5.     if(x.item(cont).hasChildNodes())
  6.     {
  7.         document.write('Tiene hijos<br />');
  8.         document.write('-->Hijo(' + x.nodeName + ') ' + cont + ', tiene ' + x.item(cont).length + ' elementos.<br />');
  9.         for(hijo = 0; hijo < x.item(cont).length; hijo++)
  10.         {
  11.  
  12.         }
  13.     }
  14.     else
  15.     {
  16.         document.write('No tiene hijos');
  17.     }
  18. }
  19. </script>

what i get is the following result:

Tiene hijos
-->Hijo(undefined) 0, tiene undefined elementos.
Tiene hijos
-->Hijo(undefined) 1, tiene undefined elementos.
Tiene hijos
-->Hijo(undefined) 2, tiene undefined elementos.
Tiene hijos
-->Hijo(undefined) 3, tiene undefined elementos.
Tiene hijos
-->Hijo(undefined) 4, tiene undefined elementos.
Tiene hijos
-->Hijo(undefined) 5, tiene undefined elementos.
Tiene hijos
-->Hijo(undefined) 6, tiene undefined elementos.
Tiene hijos
-->Hijo(undefined) 7, tiene undefined elementos.
Tiene hijos
-->Hijo(undefined) 8, tiene undefined elementos.
Tiene hijos
-->Hijo(undefined) 9, tiene undefined elementos.
Tiene hijos
-->Hijo(undefined) 10, tiene undefined elementos.
Tiene hijos
-->Hijo(undefined) 11, tiene undefined elementos.
Tiene hijos
-->Hijo(undefined) 12, tiene undefined elementos.

i thought that when i use the getElementsBy TagName() i would get the DIV elements, with all his childs? but it seems that i only get the element and nothing else.

someone know, how i could do this.

Thanks to everyone!

Eduardo

PS: Sorry for my poor english.
Similar Threads
Reputation Points: 10
Solved Threads: 0
Newbie Poster
eduardor2k is offline Offline
10 posts
since Aug 2009
Permalink
Aug 20th, 2009
0

Re: Working with getElementsWithTagName()

Hi Eduardo,

try to make it in a lowercase format when you specify its tagname: var x = document.getElementsByTagName("div") .

Havnt tried your code yet. Please let me know how it worked..
Last edited by essential; Aug 20th, 2009 at 9:01 am.
Featured Poster
Reputation Points: 114
Solved Threads: 138
Posting Shark
essential is offline Offline
973 posts
since Aug 2008
Permalink
Aug 20th, 2009
0

Re: Working with getElementsWithTagName()

Eduardo,

With respect to Essential who has already started to answer your question, I wonder if a recursive solution would do the job.

Recursion is where a function includes call(s) to itself. This allows a tree structure (such as a DOM) to be interrogated to any number of levels deep, as opposed to an iterative solution which would require hard-coding a finite number of levels. From your own code, I think you had just realised the limitations of iteration.

Here's a whole html page:
JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  2.     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html>
  4. <head>
  5. <title>Airshow :: Untitled</title>
  6. <style type="text/css">
  7. #DOMList {
  8. 	padding : 5px;
  9. 	border : 1px solid #006699;
  10. 	font-size:9pt;
  11. }
  12. #DOMList p {
  13. 	margin : 0;
  14. }
  15. #DOMList p.indent {
  16. 	margin-left : 20px;
  17. }
  18. #DOMList h2 {
  19. 	margin : 0;
  20. }
  21. #DOMList div {
  22. 	margin : 0 0 0 4px;
  23. 	padding : 0 0 0 15px;
  24. 	border-left : 1px solid #999999;
  25. }
  26. </style>
  27.  
  28. <script>
  29. function listElements(element, container, seq) {
  30. 	seq = (!seq) ? 0 : seq;
  31. 	var i, p, p2;
  32. 	var fr = document.createDocumentFragment();
  33. 	var p = document.createElement('p');
  34. 	p.innerHTML = "<b>" + (seq+1) + ". &lt;" + element.nodeName + "&gt;</b>";
  35. 	fr.appendChild(p);
  36. 	var nextContainer = document.createElement('div');
  37. 	var e = element.childNodes;
  38. 	if(e && e.length) {
  39. 		nextContainer.innerHTML = "<p>Element tiene " + e.length + " hijos.</p>";
  40. 		for(i=0; i<e.length; i++) {
  41. 			listElements(e[i], nextContainer, i);//NOTE: This is a recursive call
  42. 		}
  43. 		fr.appendChild(nextContainer);
  44. 	}
  45. 	else if (element.nodeType == 1) {
  46. 		nextContainer.innerHTML = "<p>Element no tiene hijos.</p>";
  47. 		fr.appendChild(nextContainer);
  48. 	}
  49. 	container.appendChild(fr);
  50. }
  51. onload = function(){
  52. 	listElements( document.body, document.getElementById("DOMList") );
  53. }
  54. </script>
  55. </head>
  56.  
  57. <body>
  58.  
  59. <h1>Heading 1</h1>
  60. <p>text 1</p>
  61. <div>text 2
  62. <p>text 3</p>
  63. </div>
  64. <div></div>
  65.  
  66. <div id="DOMList"></div>
  67.  
  68. </body>
  69. </html>
You will see differences in Firefox versus IE. The former treats white space between elements as a text element, while the latter does not.

Airshow
Sponsor
Reputation Points: 300
Solved Threads: 357
WiFi Lounge Lizard
Airshow is offline Offline
2,522 posts
since Apr 2009
Permalink
Aug 20th, 2009
0

Re: Working with getElementsWithTagName()

Hi,

here's your requested code:

javascript Syntax (Toggle Plain Text)
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  2.    "http://www.w3.org/TR/html4/loose.dtd">
  3. <html lang="en">
  4. <head>
  5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  6. <meta http-equiv="Content-Script-Type" content="text/javascript">
  7. <title>www.daniweb.com</title>
  8. </head>
  9. <body>
  10. <div id="div-0" style="background-color : #000000; color : #FFFFFF">
  11. <b>Div1 Text #1</b><br>
  12. <b>Div1 Text #2</b></div>
  13.  
  14. <div id="div-1" style="background-color : #EE0000; color : #FFFFFF">
  15. <b>Div2 Text #1</b><br>
  16. <b>Div2 Text #2</b></div>
  17. <script type="text/javascript">
  18. <!--
  19. var d = document;
  20. ( function( ) {
  21.    var x = null;
  22.    if ( x = d.getElementsByTagName("div")) {
  23.    var eLen = x.length;
  24.       for ( var i = 0; i < eLen; i++ ) {
  25.       var div = x[ i ];     
  26.          if ( div.hasChildNodes() ) {
  27.          var childs = div.childNodes;
  28.          var cLen = childs.length;
  29.             for ( var j = 0; j < cLen; j += 1 ) {
  30.                if ( childs[ j ] && childs[ j ].nodeName.toLowerCase() === "b" ) {   
  31.             var attribute = div.getAttribute( "style" );
  32.             var setAttr = d.createAttribute( "style" );
  33.             setAttr.nodeValue = attribute;
  34.             childs[ j ].setAttributeNode( setAttr );
  35.                }
  36.             } div.removeAttribute( "style" );
  37.          }
  38.       } return; 
  39.    } alert( "Failed to execute the script, please update your browser" );
  40.    return false;
  41. } )( )
  42.  
  43. // -->
  44. </script>
  45. </body>
  46. </html>
Featured Poster
Reputation Points: 114
Solved Threads: 138
Posting Shark
essential is offline Offline
973 posts
since Aug 2008
Permalink
Aug 20th, 2009
0

Re: Working with getElementsWithTagName()

Hi Airshow,
sorry if I came late and didnt noticed that you had your post.

Have a good day ahead...
Featured Poster
Reputation Points: 114
Solved Threads: 138
Posting Shark
essential is offline Offline
973 posts
since Aug 2008
Permalink
Aug 20th, 2009
0

Re: Working with getElementsWithTagName()

Ess, we posted almost simultaneously. With more practise we can be in the Olympics doing "synchronised posting"

Airshow
Sponsor
Reputation Points: 300
Solved Threads: 357
WiFi Lounge Lizard
Airshow is offline Offline
2,522 posts
since Apr 2009
Permalink
Aug 21st, 2009
0

Re: Working with getElementsWithTagName()

Thanks to everyone for the comments and useful code!

I will see how it works, and put it in my script.

Thanks again!
Reputation Points: 10
Solved Threads: 0
Newbie Poster
eduardor2k is offline Offline
10 posts
since Aug 2009
Permalink
Aug 21st, 2009
0

Re: Working with getElementsWithTagName()

Hi to everyone:

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
  1. <script type=""text/javascript"">
  2. <!--
  3. var d = document;
  4. ( function( ) {
  5. 	var x = null;
  6. 	if ( x = d.getElementsByTagName(""div"")) {
  7. 		var eLen = x.length;
  8.         document.write('Num de Elementos: ' + eLen + '<br />');
  9. 		for ( var i = 0; i < eLen; i++ ) {
  10.             document.write('-->Bucle I = ' + i + ' de ' + (eLen-1));
  11. 			var div = x[ i ];
  12. 			document.write(', x[i] = ' + x[i] + ', Tipo: '+x[i].nodeName+'<br />');
  13.             if ( div.hasChildNodes() ) {
  14.                 document.write('----> Tiene Hijos');
  15. 				var childs = div.childNodes;
  16. 				// READ THE COLOR AND SAVE IT TO A VARIABLE
  17.                 var bgColor = div.style.backgroundColor;
  18.                 document.write(' color: (' + bgColor + ') ');
  19. 				var cLen = childs.length;
  20. 				document.write('Num de Elementos: ' + (cLen-1) + '<br />');
  21.                 for ( var j = 0; j < cLen; j += 1 ) {
  22.                     document.write('------>Dentro del FOR '+j+' de '+cLen+' Elementos '+ childs[j].nodeName +'<br />');
  23. 					COPY TO CHILD BACKGROUND COLOR STYLE
  24. 				} 
  25.                 //DELETE DIV BACKGROUND COLOR ATRIBUTTE
  26. 			}
  27. 		} 
  28.         return;
  29. 	} 
  30.     alert( ""Failed to execute the script, please update your browser"" );
  31. return false;
  32. } )( )
  33. // -->
  34. </script>

I've just changed a little bit of code, but i try to add the missing parts, but the code does nothing, i'm using firefox with firebug, and i can see that the style properties are in the dom, but they all appera empty, the properties in the HTML, not in the <style> appera to be a new node. see picture

http://www.subirimagenes.com/otros-u...d-3075072.html

I hope you can help me, thanks to everyone!
Reputation Points: 10
Solved Threads: 0
Newbie Poster
eduardor2k is offline Offline
10 posts
since Aug 2009
Permalink
Aug 21st, 2009
0

Re: Working with getElementsWithTagName()

Eduardo,

Maybe I misunderstood your requirement but if you decide to try my code, then please use the version below, which is more compact, and lists only <div>s at the top level (then all child elements at nested levels).

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  2.     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html>
  4. <head>
  5. <title>Airshow :: Untitled</title>
  6. <style type="text/css">
  7. #DOMList {
  8. 	padding : 5px;
  9. 	border : 1px solid #006699;
  10. 	font-size:9pt;
  11. }
  12. #DOMList p {
  13. 	margin : 0;
  14. }
  15. #DOMList div {
  16. 	margin : 0 0 0 4px;
  17. 	padding : 0 0 0 15px;
  18. 	border-left : 1px solid #999999;
  19. }
  20. </style>
  21. <script>
  22. function listElements(name, e, seq) {
  23. 	seq = (!seq) ? 0 : seq;
  24. 	var i, d = document, fr = d.createDocumentFragment(), p = d.createElement('p');
  25. 	p.innerHTML = "<b>" + (seq+1) + ". " + name + "</b>&nbsp;Tiene " + e.length + " hijos.";
  26. 	fr.appendChild(p);
  27. 	if(e.length) {
  28. 		var c = d.createElement('div');
  29. 		for(i=0; i<e.length; i++) {
  30. 			c.appendChild(listElements('&lt;'+e[i].nodeName+'&gt;', e[i].childNodes, i));//NOTE: This is a recursive call
  31. 		}
  32. 		fr.appendChild(c);
  33. 	}
  34. 	return(fr);
  35. }
  36.  
  37. onload = function(){
  38. 	var c = document.createElement('div');
  39. 	c.setAttribute('id', 'DOMList')
  40. 	c.appendChild(listElements( 'Base', document.getElementsByTagName('div') ));
  41. 	document.body.appendChild(c);
  42. }
  43. </script>
  44. </head>
  45.  
  46. <body>
  47.  
  48. <h1>Heading 1</h1>
  49. <p>text 1</p>
  50. <div>text 2
  51. <p>text 3</p>
  52. </div>
  53. <div></div>
  54.  
  55. </body>
  56. </html>
As I say, it may not be what you are seeking but hope it might be useful anyway as a lesson in recursion.

Airshow
Last edited by Airshow; Aug 21st, 2009 at 8:47 am.
Sponsor
Reputation Points: 300
Solved Threads: 357
WiFi Lounge Lizard
Airshow is offline Offline
2,522 posts
since Apr 2009
Permalink
Aug 21st, 2009
0

Re: Working with getElementsWithTagName()

Airshow, thank you very much for your example code, i will check it later at night, my problem is that i don't know exactly how work the dom tree in javascript, but i think i'm getting an small idea of how everything works.

Thanks again! i will keep you posted about how everything goes.
Reputation Points: 10
Solved Threads: 0
Newbie Poster
eduardor2k is offline Offline
10 posts
since Aug 2009

This thread is more than three months old

No one has posted to this discussion for at least three months. Please let old threads die and do not reply to them unless you feel you have something new and valuable to contribute that absolutely must be added to make the discussion complete. Otherwise, please start a new thread in this forum instead.
Message:
Previous Thread in JavaScript / DHTML / AJAX Forum Timeline: need to add "." check to form validation
Next Thread in JavaScript / DHTML / AJAX Forum Timeline: How to get printer status and print MS word document using javascript?





About Us | Contact Us | Advertise | Acceptable Use Policy
Forum Index | Build Custom RSS Feed


Follow us on Twitter


© 2011 DaniWeb® LLC