Javascript Elements with class / variable ID

Question

There's a page with some HTML as follows:

<dd id="fc-gtag-VARIABLENAMEONE" class="fc-content-panel fc-friend">

Then further down the page, the code will repeat with, for example:

<dd id="fc-gtag-VARIABLENAMETWO" class="fc-content-panel fc-friend">

How do I access these elements using an external script?

I can't seem to use document.getElementByID correctly in this instance. Basically, I want to search the whole page using oIE (InternetExplorer.Application Object) created with VBScript and pull through every line (specifically VARIABLENAME(one/two/etc)) that looks like the above two into an array.

I've researched the Javascript and through trial and error haven't gotten anywhere with this specific page, mainly because there's no tag name, and the tag ID always changes at the end. Can someone help? :)

EDIT: I've attempted to use the Javascript provided as an answer to get results, however nothing seems to happen when applied to my page. I think the tag is ALSO in a tag so it's getting complicated - here's a major part of the code from the webpage I will be scanning.

<dd id="fc-gtag-INDIAN701" class="fc-content-panel fc-friend">
    <div class="fc-pic">
        <img src="http://image.xboxlive.com/global/t.58570942/tile/0/20400" alt="INDIAN701"/>
    </div>
    <div class="fc-stats">
        <div class="fc-gtag">
            <a class="fc-gtag-link" href='/en-US/MyXbox/Profile?gamertag=INDIAN701'>INDIAN701</a>
            <div class="fc-gscore-icon">3690</div>
        </div>
        <div class="fc-presence-text">Last seen 9 hours ago playing Halo 3</div>
    </div>
    <div class="fc-actions">
        <div class="fc-icon-actions">
            <div class="fc-block">
                <span class="fc-buttonlabel">Block User</span>
                <a href="#" class="fc-blockbutton" onclick="return FriendCenter.BlockFriend('INDIAN701'); return false;"></a>
            </div>
        </div>
        <div class="fc-text-actions">
            <div class="fc-action">&nbsp;</div>
            <span class="fc-action">
                <a href="/en-US/MyXbox/Profile?gamertag=INDIAN701">View Profile</a>
            </span>
            <span class="separator-icon">|</span>
            <span class="fc-action">
                <a href="/en-US/GameCenter?compareTo=INDIAN701">Compare Games</a>
            </span>
            <span class="separator-icon">|</span>
            <span class="fc-action">
                <a href="/en-US/MessageCenter/Compose?gamertag=INDIAN701">Send Message</a>
            </span>
            <span class="separator-icon">|</span>
            <span class="fc-action">
                <a href="#" onclick="return FriendCenter.AddFriend('INDIAN701');">Send Friend Request</a>
            </span>
        </div>
    </div>
</dd>

This then REPEATS, with a different username (the above username is INDIAN701).

I tried the following but clicking the button doesn't yield any results:

<script language="vbscript">
    Sub window_onLoad

      Set oIE = CreateObject("InternetExplorer.Application")
      oIE.visible = True
      oIE.navigate "http://live.xbox.com/en-US/friendcenter/RecentPlayers?Length=12"

    End Sub

</script>


<script type="text/javascript"> 
    var getem = function () {
      var nodes = oIE.document.getElementsByTagName('dd'),
      a = [];

      for (i in nodes) {
          (nodes[i].id) && (nodes[i].id.match(/fc\-gtag\-/)) && (a.push(nodes[i]));
      }
      alert(a[0].id);
      alert(a[1].id);
    }
</script> 

<body>

<input type="BUTTON" value="Try" onClick="getem()">


</body>

Basically I'm trying to get a list of usernames from the recent players list (I was hoping I wouldn't have to explain this though :) ).

is the player name in the anchor tags that have a class of "fc-gtag-link"? — shawndumas
– shawndumas, Commented Aug 4, 2011 at 15:44
at the end of the playername which is what I want, it has class="fc-content-panel fc-friend" — Jimbo
– Jimbo, Commented Aug 4, 2011 at 20:19
I'd like to note to everyone that the use of an iFrame doesn't work, because the xbox webpage requires a login(https). This is why vbscript dims oIE as the InternetExplorer.Application object to reference in VBScript. However, this is not in Javascript so I don't know how to access this from Javascript. Still no solution, any takers? Entirely Javascript would work too... — Jimbo
– Jimbo, Commented Aug 9, 2011 at 11:27

shawndumas · Accepted Answer · 2011-08-04 21:04:03Z

1

    var getem = function () {
        var nodes = document.getElementsByTagName('dd'),
            a = [];

        for (var i in nodes) if (nodes[i].id) {
            (nodes[i].id.match(/fc\-gtag\-/)) && (a.push(nodes[i].id.split('-')[2]));
        }
        alert(a[0]);
    };

please try it by clicking here!

edited Aug 4, 2011 at 21:04

answered Aug 4, 2011 at 15:53

shawndumas

1,43315 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Jimbo Over a year ago

This also doesn't give any alerts :(

Jimbo Over a year ago

I understand how the javascript works through clicking the link - appreciate that little addition. I believe the error I'm getting is that I created the variable (as you can see in my script above) oIE from VBScript - as an InternetExplorer.Application object. The problem here is, I don't know how to reference this in my Javascript. oIE.document.getElementsByTagName('dd') does not work!

shawndumas Over a year ago

try this (notice the capital 'D'): oIE.Document.getElementsByTagName('dd')

Jimbo Over a year ago

Nope, no alert with the capital D either unfortunately :(

shawndumas Over a year ago

if you click on my name do you see my email address?

shawndumas · Accepted Answer · 2011-08-03 13:55:02Z

1

var getem = function () {
    var nodes = document.getElementsByTagName('dd'),
        a = [];

    for (var i in nodes) if (nodes[i].id) {
        (nodes[i].id.match(/fc\-gtag\-/)) && (a.push(nodes[i]));
    }
    alert(a[0].id);
    alert(a[1].id);
};

try it out on jsbin

edited Aug 3, 2011 at 13:55

answered Aug 3, 2011 at 13:49

shawndumas

1,43315 silver badges17 bronze badges

1 Comment

Jimbo Over a year ago

This is what I'm looking for, as it's in simple Javascript with a Regex... but I'm not sure the code is working for what I want. I may have not given enough information, therefore I've updated the above post if you would be so kind as to take another look :)

shawndumas · Accepted Answer · 2011-08-08 14:11:41Z

1

    <body>
    <script type="text/javascript">
        window.onload = function () {
            var outputSpan = document.getElementById('outputSpan'),
                iFrame = frames['subjectIFrame'];

            iFrame.document.location.href = 'http://live.xbox.com/en-US/friendcenter/RecentPlayers?Length=1';
            (function () {
                var nodes = iFrame.document.getElementsByTagName('dd'),
                a = [];
                for (var i in nodes) if (nodes[i].id) {
                    (nodes[i].id.match(/fc\-gtag\-/)) && (a.push(nodes[i].id.split('-')[2]));
                }
                for (var j in a) if (a.hasOwnProperty(j)) {
                    outputSpan.innerHTML += (a[j] + '<br />');
                }
            })();
        };
    </script>
    <span id="outputSpan"></span>
    <iframe id="subjectIFrame" frameborder="0" height="100" width="100" />
</body>

answered Aug 8, 2011 at 14:11

shawndumas

1,43315 silver badges17 bronze badges

1 Comment

Jimbo Over a year ago

Because the XBOX.com website requires a LOGIN to (https here) access the recent players list, this cannot be displayed in an iFrame. Really appreciate your help though :)

Michael Lorton · Accepted Answer · 2011-08-03 12:50:48Z

0

What does "I can't seem to use document.getElementsByID correctly in this instance" mean? Are you referring to the fact that you are misspelling getElementByID?

answered Aug 3, 2011 at 12:50

Michael Lorton

44.7k26 gold badges111 silver badges159 bronze badges

1 Comment

Jimbo Over a year ago

That's merely a mistake in me typing it up, not in my code. Thanks for pointing it out though!

josh.trow · Accepted Answer · 2011-08-03 12:55:36Z

0

So...something like this (jQuery)?

var els = [];

$('.fc-content-panel.fc-friend').each(function() {
  els.push(this));
});

Now you have an array of all the elements that have both of those classes.

answered Aug 3, 2011 at 12:55

josh.trow

4,90123 silver badges31 bronze badges

3 Comments

Michael Lorton Over a year ago

Might I suggest var els = $('.fc-content-panel.fc-friend').get(), which does the same thing.

josh.trow Over a year ago

@Malvolio: Cool, I had no idea about that. You learn something every day!

Michael Lorton Over a year ago

Yes, that is a risk. Try sleeping late.

Collectives™ on Stack Overflow

Javascript Elements with class / variable ID

5 Answers 5

5 Comments

1 Comment

1 Comment

1 Comment

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

5 Comments

1 Comment

1 Comment

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related