Using GetElementsByTag to display nodes

**MichiKen** · 02-04-2012 01:53 PM

Trying to run a script that will display the name of every node in an HTML document. The URL to my page is below. I'm getting a blank page.

http://goken68.brinkster.net/GetElementsByTag.html

Code:

Code:

<html>
<body>
<head>
<script type="text/javascript" language="javascript">

var content = document.getElementsByTagName(*);

for (var i = 0; i < content.length; i++)

{

  document.write(content[i].nodeName.innerHTML);

}

</head>


<h1>NFL Teams</h1>

<h2>NFC North</h2>
<p>Chicago Bears</p>
<p>Green Bay Packers</p>
<p>Minnesota Vikings</p>
<p>Detroit Lions</p>

<h2>NFC South</h2>
<p>New Orleans Saints</p>
<p>Atlanta Falcons</p>
<p>Carolina Panthers</p>
<p>Tampa Bay Buccannears</p>

<h2>NFC East</h2>
<p>Dallas Cowboys</p>
<p>Washington Redskins</p>
<p>Philadelphia Eagles</p>
<p>NY Giants</p>

<h2>NFC West</h2>
<p>San Francisco 49ers</p>
<p>Arizona Cardinals</p>
<p>Seattle Seahawks</p>
<p>St.Louis Rams</p>





</body>
</html>

**MichiKen** · 02-04-2012 02:21 PM

Ok, got the page to display. When clicking on the "Show nodes" button, it gives "object expected" error for line 50.

Updated code:

Code:

<html>
<body>
<head>
<script type="text/javascript" language="javascript">

function getNodes() {

var content = document.getElementsByTagName(*);

for (var i = 0; i < content.length; i++)

{

  document.write(content[i].nodeName.innerHTML);

}
}

</script>

</head>


<h1>NFL Teams</h1>

<h2>NFC North</h2>
<p>Chicago Bears</p>
<p>Green Bay Packers</p>
<p>Minnesota Vikings</p>
<p>Detroit Lions</p>

<h2>NFC South</h2>
<p>New Orleans Saints</p>
<p>Atlanta Falcons</p>
<p>Carolina Panthers</p>
<p>Tampa Bay Buccannears</p>

<h2>NFC East</h2>
<p>Dallas Cowboys</p>
<p>Washington Redskins</p>
<p>Philadelphia Eagles</p>
<p>NY Giants</p>

<h2>NFC West</h2>
<p>San Francisco 49ers</p>
<p>Arizona Cardinals</p>
<p>Seattle Seahawks</p>
<p>St.Louis Rams</p>

<input type="button" value="Show Nodes" onclick="getNodes()">



</body>
</html>

**xelawho** · 02-04-2012 02:50 PM

the problem with getting every node on a page is that you end up with a whole lot of stuff that you don't want (scripts, functions, etc). I don't know what you're trying to do, but maybe this comes closer...

Code:

<html>
<body>
<head>
<script type="text/javascript" language="javascript">

function getNodes() {

wrap=document.getElementById("teams")
for (var i = 0; i < wrap.childNodes.length; i++){
if (wrap.childNodes[i].innerHTML!=undefined){
  document.write(wrap.childNodes[i].innerHTML+"<br>")
		}
	}
}

</script>

</head>

<div id="teams">
<h1>NFL Teams</h1>

<h2>NFC North</h2>
<p>Chicago Bears</p>
<p>Green Bay Packers</p>
<p>Minnesota Vikings</p>
<p>Detroit Lions</p>

<h2>NFC South</h2>
<p>New Orleans Saints</p>
<p>Atlanta Falcons</p>
<p>Carolina Panthers</p>
<p>Tampa Bay Buccannears</p>

<h2>NFC East</h2>
<p>Dallas Cowboys</p>
<p>Washington Redskins</p>
<p>Philadelphia Eagles</p>
<p>NY Giants</p>

<h2>NFC West</h2>
<p>San Francisco 49ers</p>
<p>Arizona Cardinals</p>
<p>Seattle Seahawks</p>
<p>St.Louis Rams</p>
</div>
<input type="button" value="Show Nodes" onclick="getNodes()">

</body>
</html>

**MichiKen** · 02-06-2012 10:28 AM

I'm trying to learn how to run a basic search node by node to display the name of each node. Haven't tried your code yet. It's a little overwhelming for my level of knowledge in javascript. I made some modifications to what I had. Now, when clicking the "Show Nodes" button it just says "undefined". The error message in the web browser says "permission denied" at line 10

Here's the new link:

http://goken68.brinkster.net/GetElementsByTag2.html

**xelawho** · 02-06-2012 11:27 AM

I would be interested to know why you want the node names and what your expected output is.

but anyway. Using document.write is useless for this purpose, because it will overwrite the contents of your file as soon as it is called, so the nodes you are trying to access will no longer exist. Use innerHTML instead.

Looking at the link you have posted you loop through all the elements with a "div" tag in your document (which happens to total one) then try to get the innerHTML of some element called childNodes. But childNodes is a collection (even if there is only one of them), so you have to loop through that as well.

Here's how I would do it, if for some weird reason I wanted to get the nodeNames of the childNodes (but like I say, I would be surprised if this is what you actually want...)

Code:

<html>
<body>
<head>
<script type="text/javascript" language="javascript">

function getNodes() {

var content = document.getElementsByTagName("div");
for (var i = 0; i < content.length; i++){
for (var a = 0; a < content[i].childNodes.length; a++){
  document.getElementById("results").innerHTML+=content[i].childNodes[a].nodeName;
		}
	}
}

</script>

</head>

<div id="teams">
<h1>NFL Teams</h1>

<h2>NFC North</h2>
<p>Chicago Bears</p>
<p>Green Bay Packers</p>

<p>Minnesota Vikings</p>
<p>Detroit Lions</p>

<h2>NFC South</h2>
<p>New Orleans Saints</p>
<p>Atlanta Falcons</p>
<p>Carolina Panthers</p>
<p>Tampa Bay Buccannears</p>

<h2>NFC East</h2>

<p>Dallas Cowboys</p>
<p>Washington Redskins</p>
<p>Philadelphia Eagles</p>
<p>NY Giants</p>

<h2>NFC West</h2>
<p>San Francisco 49ers</p>
<p>Arizona Cardinals</p>
<p>Seattle Seahawks</p>

<p>St.Louis Rams</p>
</div>

<input type="button" value="Show Nodes" onclick="getNodes()">
<div id="results"></div>


</body>
</html>

Thread: Using GetElementsByTag to display nodes

Thread Tools

Display

Using GetElementsByTag to display nodes

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions