www.webdeveloper.com
Results 1 to 5 of 5

Thread: Using GetElementsByTag to display nodes

  1. #1
    Join Date
    Apr 2008
    Posts
    130

    Using GetElementsByTag to display nodes

    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>

  2. #2
    Join Date
    Apr 2008
    Posts
    130
    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>

  3. #3
    Join Date
    Nov 2010
    Posts
    978
    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>

  4. #4
    Join Date
    Apr 2008
    Posts
    130
    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

  5. #5
    Join Date
    Nov 2010
    Posts
    978
    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 Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles