Question

有一个页面包含一些HTML，如下所示：

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

然后在页面的下方，代码将重复，例如：

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

如何使用外部脚本访问这些元素？

在这个实例中，我似乎无法正确使用document.getElementByID。基本上，我想使用用VBScript创建的oIE（InternetExplorer.Application Object）搜索整个页面，并将看起来像上面这两个的每一行（特别是VARIABLENAME（一个/两个/等））拉到一个数组中。

我已经研究过Javascript并且通过试验和错误没有得到这个特定页面的任何地方，主要是因为没有标签名称，标签ID总是在最后改变。有人可以帮忙吗？：）

编辑：我尝试使用提供的Javascript作为获得结果的答案，但是当应用于我的页面时似乎没有任何反应。我认为标签也是标签，所以它变得越来越复杂 - 这是我将要扫描的网页代码的主要部分。

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

然后使用不同的用户名（上述用户名为INDIAN701）进行REPEATS。

我尝试了以下操作但单击按钮不会产生任何结果：

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

基本上我正在尝试从最近的玩家列表中获取用户名列表（我希望我不必解释这个:)）。

Answer 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

Answer 2

    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!

Answer 3

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

Answer 4

在这个例子中“我似乎无法正确使用document.getElementsByID”是什么意思？你指的是你拼错了getElementByID吗？

Answer 5

那么......像这样的东西（jQuery）？

var els = [];

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

现在你有一个包含这两个类的所有元素的数组。

具有类/变量ID的Javascript元素

5 个答案: