具有类/变量ID的Javascript元素

Javascript Elements with class / variable ID

本文关键字：Javascript 元素 ID 变量      更新时间：2023-09-26

有一个页面包含一些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(one/too/etc((拉入一个数组。

我研究了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>

然后使用不同的用户名(上面的用户名是INDIAN001(重复此操作。

我尝试了以下操作，但点击按钮没有产生任何结果：

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

基本上，我试图从最近的玩家列表中获得一份用户名列表(我希望我不必解释这一点：(。

    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]);
    };

请点击这里试试！

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);
};

在jsbin上试用

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

"我在这个例子中似乎不能正确使用document.getElementsByID"是什么意思？你指的是你拼错了getElementByID这个事实吗？

所以。。。像这样的东西(jQuery(？

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

现在，您有了一个包含所有元素的数组，这些元素同时具有这两个类。

相关文章：