AJAX

Working with getElementsWithTagName()

Please support our JavaScript / DHTML / AJAX advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases

•

Join Date: Aug 2009

Posts: 10

Reputation: eduardor2k is an unknown quantity at this point

Solved Threads: 0

eduardor2k eduardor2k is offline

Offline

Newbie Poster

Working with getElementsWithTagName()

Aug 20th, 2009

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.

Help with Code Tags

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)

<div style="background-color: #000000">
<b>Text</b>
</div>

would change (using javascript)

Help with Code Tags

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)

<div>
<b style="background-color: #000000">Text</b>
</div>

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

 Help with Code Tags 
 JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
<script languaje=""JavaScript"" type=""text/javascript"">
var x = document.getElementsByTagName('DIV');
for(cont = 0; cont < x.length; cont++)
{
    if(x.item(cont).hasChildNodes())
    {
        document.write('Tiene hijos<br />');
        document.write('-->Hijo(' + x.nodeName + ') ' + cont + ', tiene ' + x.item(cont).length + ' elementos.<br />');
        for(hijo = 0; hijo < x.item(cont).length; hijo++)
        {
 
        }
    }
    else
    {
        document.write('No tiene hijos');
    }
}
</script>
<script languaje=""JavaScript"" type=""text/javascript"">
var x = document.getElementsByTagName('DIV');
for(cont = 0; cont < x.length; cont++)
{
    if(x.item(cont).hasChildNodes())
    {
        document.write('Tiene hijos<br />');
        document.write('-->Hijo(' + x.nodeName + ') ' + cont + ', tiene ' + x.item(cont).length + ' elementos.<br />');
        for(hijo = 0; hijo < x.item(cont).length; hijo++)
        {

        }
    }
    else
    {
        document.write('No tiene hijos');
    }
}
</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.

•

Join Date: Aug 2008

Posts: 954

Reputation: essential will become famous soon enough

Solved Threads: 131

essential

Offline

Posting Shark

Re: Working with getElementsWithTagName()

Aug 20th, 2009

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.

Dev.Opera — FOLLOW THE STANDARDS, BREAK THE RULES...

•

Join Date: Apr 2009

Posts: 816

Reputation: Airshow is on a distinguished road

Solved Threads: 116

Airshow

Offline

Practically a Posting Shark

Re: Working with getElementsWithTagName()

Aug 20th, 2009

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:

 Help with Code Tags 
 JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Airshow :: Untitled</title>
<style type="text/css">
#DOMList {
	padding : 5px;
	border : 1px solid #006699;
	font-size:9pt;
}
#DOMList p {
	margin : 0;
}
#DOMList p.indent {
	margin-left : 20px;
}
#DOMList h2 {
	margin : 0;
}
#DOMList div {
	margin : 0 0 0 4px;
	padding : 0 0 0 15px;
	border-left : 1px solid #999999;
}
</style>
 
<script>
function listElements(element, container, seq) {
	seq = (!seq) ? 0 : seq;
	var i, p, p2;
	var fr = document.createDocumentFragment();
	var p = document.createElement('p');
	p.innerHTML = "<b>" + (seq+1) + ". &lt;" + element.nodeName + "&gt;</b>";
	fr.appendChild(p);
	var nextContainer = document.createElement('div');
	var e = element.childNodes;
	if(e && e.length) {
		nextContainer.innerHTML = "<p>Element tiene " + e.length + " hijos.</p>";
		for(i=0; i<e.length; i++) {
			listElements(e[i], nextContainer, i);//NOTE: This is a recursive call
		}
		fr.appendChild(nextContainer);
	}
	else if (element.nodeType == 1) {
		nextContainer.innerHTML = "<p>Element no tiene hijos.</p>";
		fr.appendChild(nextContainer);
	}
	container.appendChild(fr);
}
onload = function(){
	listElements( document.body, document.getElementById("DOMList") );
}
</script>
</head>
 
<body>
 
<h1>Heading 1</h1>
<p>text 1</p>
<div>text 2
<p>text 3</p>
</div>
<div></div>
 
<div id="DOMList"></div>
 
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Airshow :: Untitled</title>
<style type="text/css">
#DOMList {
	padding : 5px;
	border : 1px solid #006699;
	font-size:9pt;
}
#DOMList p {
	margin : 0;
}
#DOMList p.indent {
	margin-left : 20px;
}
#DOMList h2 {
	margin : 0;
}
#DOMList div {
	margin : 0 0 0 4px;
	padding : 0 0 0 15px;
	border-left : 1px solid #999999;
}
</style>

<script>
function listElements(element, container, seq) {
	seq = (!seq) ? 0 : seq;
	var i, p, p2;
	var fr = document.createDocumentFragment();
	var p = document.createElement('p');
	p.innerHTML = "<b>" + (seq+1) + ". &lt;" + element.nodeName + "&gt;</b>";
	fr.appendChild(p);
	var nextContainer = document.createElement('div');
	var e = element.childNodes;
	if(e && e.length) {
		nextContainer.innerHTML = "<p>Element tiene " + e.length + " hijos.</p>";
		for(i=0; i<e.length; i++) {
			listElements(e[i], nextContainer, i);//NOTE: This is a recursive call
		}
		fr.appendChild(nextContainer);
	}
	else if (element.nodeType == 1) {
		nextContainer.innerHTML = "<p>Element no tiene hijos.</p>";
		fr.appendChild(nextContainer);
	}
	container.appendChild(fr);
}
onload = function(){
	listElements( document.body, document.getElementById("DOMList") );
}
</script>
</head>

<body>

<h1>Heading 1</h1>
<p>text 1</p>
<div>text 2
<p>text 3</p>
</div>
<div></div>

<div id="DOMList"></div>

</body>
</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

50% of the solution lies in accurately describing the problem!

•

Join Date: Aug 2008

Posts: 954

Reputation: essential will become famous soon enough

Solved Threads: 131

essential

Offline

Posting Shark

Re: Working with getElementsWithTagName()

Aug 20th, 2009

Hi,

here's your requested code:

 Help with Code Tags 
 javascript Syntax (Toggle Plain Text) 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>www.daniweb.com</title>
</head>
<body>
<div id="div-0" style="background-color : #000000; color : #FFFFFF">
<b>Div1 Text #1</b><br>
<b>Div1 Text #2</b></div>
 
<div id="div-1" style="background-color : #EE0000; color : #FFFFFF">
<b>Div2 Text #1</b><br>
<b>Div2 Text #2</b></div>
<script type="text/javascript">
<!--
var d = document;
( function( ) {
   var x = null;
   if ( x = d.getElementsByTagName("div")) {
   var eLen = x.length;
      for ( var i = 0; i < eLen; i++ ) {
      var div = x[ i ];     
         if ( div.hasChildNodes() ) {
         var childs = div.childNodes;
         var cLen = childs.length;
            for ( var j = 0; j < cLen; j += 1 ) {
               if ( childs[ j ] && childs[ j ].nodeName.toLowerCase() === "b" ) {   
            var attribute = div.getAttribute( "style" );
            var setAttr = d.createAttribute( "style" );
            setAttr.nodeValue = attribute;
            childs[ j ].setAttributeNode( setAttr );
               }
            } div.removeAttribute( "style" );
         }
      } return; 
   } alert( "Failed to execute the script, please update your browser" );
   return false;
} )( )
 
// -->
</script>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>www.daniweb.com</title>
</head>
<body>
<div id="div-0" style="background-color : #000000; color : #FFFFFF">
<b>Div1 Text #1</b><br>
<b>Div1 Text #2</b></div>

<div id="div-1" style="background-color : #EE0000; color : #FFFFFF">
<b>Div2 Text #1</b><br>
<b>Div2 Text #2</b></div>
<script type="text/javascript">
<!--
var d = document;
( function( ) {
   var x = null;
   if ( x = d.getElementsByTagName("div")) {
   var eLen = x.length;
      for ( var i = 0; i < eLen; i++ ) {
      var div = x[ i ];     
         if ( div.hasChildNodes() ) {
         var childs = div.childNodes;
         var cLen = childs.length;
            for ( var j = 0; j < cLen; j += 1 ) {
               if ( childs[ j ] && childs[ j ].nodeName.toLowerCase() === "b" ) {   
            var attribute = div.getAttribute( "style" );
            var setAttr = d.createAttribute( "style" );
            setAttr.nodeValue = attribute;
            childs[ j ].setAttributeNode( setAttr );
               }
            } div.removeAttribute( "style" );
         }
      } return; 
   } alert( "Failed to execute the script, please update your browser" );
   return false;
} )( )

// -->
</script>
</body>
</html>

Dev.Opera — FOLLOW THE STANDARDS, BREAK THE RULES...

•

Join Date: Aug 2008

Posts: 954

Reputation: essential will become famous soon enough

Solved Threads: 131

essential

Offline

Posting Shark

Re: Working with getElementsWithTagName()

Aug 20th, 2009

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

Have a good day ahead...

Dev.Opera — FOLLOW THE STANDARDS, BREAK THE RULES...

•

Join Date: Apr 2009

Posts: 816

Reputation: Airshow is on a distinguished road

Solved Threads: 116

Airshow

Offline

Practically a Posting Shark

Re: Working with getElementsWithTagName()

Aug 20th, 2009

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

Airshow

50% of the solution lies in accurately describing the problem!

•

Join Date: Aug 2009

Posts: 10

Reputation: eduardor2k is an unknown quantity at this point

Solved Threads: 0

eduardor2k eduardor2k is offline

Offline

Newbie Poster

Re: Working with getElementsWithTagName()

Aug 21st, 2009

Thanks to everyone for the comments and useful code!

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

Thanks again!

•

Join Date: Aug 2009

Posts: 10

Reputation: eduardor2k is an unknown quantity at this point

Solved Threads: 0

eduardor2k eduardor2k is offline

Offline

Newbie Poster

Re: Working with getElementsWithTagName()

Aug 21st, 2009

Hi to everyone:

 Help with Code Tags 
 JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
<script type=""text/javascript"">
<!--
var d = document;
( function( ) {
	var x = null;
	if ( x = d.getElementsByTagName(""div"")) {
		var eLen = x.length;
        document.write('Num de Elementos: ' + eLen + '<br />');
		for ( var i = 0; i < eLen; i++ ) {
            document.write('-->Bucle I = ' + i + ' de ' + (eLen-1));
			var div = x[ i ];
			document.write(', x[i] = ' + x[i] + ', Tipo: '+x[i].nodeName+'<br />');
            if ( div.hasChildNodes() ) {
                document.write('----> Tiene Hijos');
				var childs = div.childNodes;
				// READ THE COLOR AND SAVE IT TO A VARIABLE
                var bgColor = div.style.backgroundColor;
                document.write(' color: (' + bgColor + ') ');
				var cLen = childs.length;
				document.write('Num de Elementos: ' + (cLen-1) + '<br />');
                for ( var j = 0; j < cLen; j += 1 ) {
                    document.write('------>Dentro del FOR '+j+' de '+cLen+' Elementos '+ childs[j].nodeName +'<br />');
					COPY TO CHILD BACKGROUND COLOR STYLE
				} 
                //DELETE DIV BACKGROUND COLOR ATRIBUTTE
			}
		} 
        return;
	} 
    alert( ""Failed to execute the script, please update your browser"" );
return false;
} )( )
// -->
</script>
<script type=""text/javascript"">
<!--
var d = document;
( function( ) {
	var x = null;
	if ( x = d.getElementsByTagName(""div"")) {
		var eLen = x.length;
        document.write('Num de Elementos: ' + eLen + '<br />');
		for ( var i = 0; i < eLen; i++ ) {
            document.write('-->Bucle I = ' + i + ' de ' + (eLen-1));
			var div = x[ i ];
			document.write(', x[i] = ' + x[i] + ', Tipo: '+x[i].nodeName+'<br />');
            if ( div.hasChildNodes() ) {
                document.write('----> Tiene Hijos');
				var childs = div.childNodes;
				// READ THE COLOR AND SAVE IT TO A VARIABLE
                var bgColor = div.style.backgroundColor;
                document.write(' color: (' + bgColor + ') ');
				var cLen = childs.length;
				document.write('Num de Elementos: ' + (cLen-1) + '<br />');
                for ( var j = 0; j < cLen; j += 1 ) {
                    document.write('------>Dentro del FOR '+j+' de '+cLen+' Elementos '+ childs[j].nodeName +'<br />');
					COPY TO CHILD BACKGROUND COLOR STYLE
				} 
                //DELETE DIV BACKGROUND COLOR ATRIBUTTE
			}
		} 
        return;
	} 
    alert( ""Failed to execute the script, please update your browser"" );
return false;
} )( )
// -->
</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!

•

Join Date: Apr 2009

Posts: 816

Reputation: Airshow is on a distinguished road

Solved Threads: 116

Airshow

Offline

Practically a Posting Shark

Re: Working with getElementsWithTagName()

Aug 21st, 2009

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).

 Help with Code Tags 
 JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Airshow :: Untitled</title>
<style type="text/css">
#DOMList {
	padding : 5px;
	border : 1px solid #006699;
	font-size:9pt;
}
#DOMList p {
	margin : 0;
}
#DOMList div {
	margin : 0 0 0 4px;
	padding : 0 0 0 15px;
	border-left : 1px solid #999999;
}
</style>
<script>
function listElements(name, e, seq) {
	seq = (!seq) ? 0 : seq;
	var i, d = document, fr = d.createDocumentFragment(), p = d.createElement('p');
	p.innerHTML = "<b>" + (seq+1) + ". " + name + "</b>&nbsp;Tiene " + e.length + " hijos.";
	fr.appendChild(p);
	if(e.length) {
		var c = d.createElement('div');
		for(i=0; i<e.length; i++) {
			c.appendChild(listElements('&lt;'+e[i].nodeName+'&gt;', e[i].childNodes, i));//NOTE: This is a recursive call
		}
		fr.appendChild(c);
	}
	return(fr);
}
 
onload = function(){
	var c = document.createElement('div');
	c.setAttribute('id', 'DOMList')
	c.appendChild(listElements( 'Base', document.getElementsByTagName('div') ));
	document.body.appendChild(c);
}
</script>
</head>
 
<body>
 
<h1>Heading 1</h1>
<p>text 1</p>
<div>text 2
<p>text 3</p>
</div>
<div></div>
 
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Airshow :: Untitled</title>
<style type="text/css">
#DOMList {
	padding : 5px;
	border : 1px solid #006699;
	font-size:9pt;
}
#DOMList p {
	margin : 0;
}
#DOMList div {
	margin : 0 0 0 4px;
	padding : 0 0 0 15px;
	border-left : 1px solid #999999;
}
</style>
<script>
function listElements(name, e, seq) {
	seq = (!seq) ? 0 : seq;
	var i, d = document, fr = d.createDocumentFragment(), p = d.createElement('p');
	p.innerHTML = "<b>" + (seq+1) + ". " + name + "</b>&nbsp;Tiene " + e.length + " hijos.";
	fr.appendChild(p);
	if(e.length) {
		var c = d.createElement('div');
		for(i=0; i<e.length; i++) {
			c.appendChild(listElements('&lt;'+e[i].nodeName+'&gt;', e[i].childNodes, i));//NOTE: This is a recursive call
		}
		fr.appendChild(c);
	}
	return(fr);
}

onload = function(){
	var c = document.createElement('div');
	c.setAttribute('id', 'DOMList')
	c.appendChild(listElements( 'Base', document.getElementsByTagName('div') ));
	document.body.appendChild(c);
}
</script>
</head>

<body>

<h1>Heading 1</h1>
<p>text 1</p>
<div>text 2
<p>text 3</p>
</div>
<div></div>

</body>
</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.

50% of the solution lies in accurately describing the problem!

•

Join Date: Aug 2009

Posts: 10

Reputation: eduardor2k is an unknown quantity at this point

Solved Threads: 0

eduardor2k eduardor2k is offline

Offline

Newbie Poster

Re: Working with getElementsWithTagName()

#10

Aug 21st, 2009

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.