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 4 of 4
  1. #1
    New Coder BatCountry's Avatar
    Join Date
    Jul 2007
    Location
    McMaynerberry, Texas
    Posts
    57
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Unhappy Extracting links with class

    Hiya!
    Trying to figure out how to use javascript to extract all links on a page that have a certain class:

    e.g. - extract only links with a class of 'tools', ignore all other links:
    Code:
    <a href="http://www.google.com" class="tools">Search</a>
    <a href="http://www.tripod.com" class="grapes">Searched</a>
    <a href="http://www.dogpile.com">Searches</a>
    Any help would be appreciated, I'm guessing I probably have to use something like getelementbyclass("tools")?
    Last edited by BatCountry; 07-27-2011 at 05:04 PM.

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,700
    Thanks
    80
    Thanked 4,658 Times in 4,620 Posts
    getElementsByClassName returns a collection, same as getElementsByTagName.

    But fair warning: It's not supported in older MSIE versions.

    So you might want to use getElementsByTagName instead, esp. if this is something you only do at page start or at least rarely.

  • Users who have thanked Old Pedant for this post:

    BatCountry (07-27-2011)

  • #3
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,148
    Thanks
    39
    Thanked 506 Times in 500 Posts

    Lightbulb Something to consider ...

    Try this...
    Code:
    <!DOC HTML>
    <html>
    <head>
    <title> Untitled </title>
    <script type="text/javascript">
    function show(cl) {
      var sel = document.getElementsByTagName('a');
      var str = '';
      for (var i=0; i<sel.length; i++) {
        if (sel[i].className == cl) { str += sel[i].href+'\n'; }
      }
      alert(str);
    }
    </script>
    <style type="text/css">
    .tools { background-Color:orange; font-size:2em; }
    .grapes { color:orange; font-size:1.5em; }
    </style>
    
    </head>
    <body>
    <a href="http://www.google.com" class="tools">Search</a>
    <a href="http://www.tripod.com" class="grapes">Searched</a>
    <a href="http://www.dogpile.com">Searches</a>
    <p>
    <button onclick="show('tools')">Show Tools</button>
    <button onclick="show('grapes')">Show Grapes</button>
    </body>
    </html>

  • Users who have thanked jmrker for this post:

    BatCountry (07-27-2011)

  • #4
    New Coder BatCountry's Avatar
    Join Date
    Jul 2007
    Location
    McMaynerberry, Texas
    Posts
    57
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Thanks Old Pedant!

    And especially thanks jmrker - that was exactly what I needed to get started +1rep!


  •  

    Posting Permissions

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