javascript - 如何在 JavaScript 中选择这个元素？

Question

我无法修改以下 html：

<iframe src="http://google.com/foo" width="600" height="338" frameborder="0" webkitAllowFullScreen allowFullScreen></iframe>
<div style="padding:5px 0; text-align:center; width:600px;"><p>
<a href="http://www.foobar.com/lol/wut">Some Link</a></p></div>

我需要定位这个元素：

<a href="http://www.foobar.com/lol/wut">Some Link</a>

要求是：

• iframe 之后的第一个链接，其 src 以域http://google.com开头

由于我无法编辑 html，因此无法简单地添加 id 并使用 document.getElementById。那么如何仅使用纯 js 来定位链接呢？

Answer 1

查看选择器，尤其是属性选择器和兄弟组合器：

iframe[src^="http://google.com"] ~ a

您可以在 jQuery 选择器表达式或document.querySelector.

Answer 2

阅读编辑。

未经测试，但假设您使用的是 jQuery，这样的东西应该可以解决问题。

var link = null;
$('iframe:first').siblings().each(function() {
    if (link !== null) return;
    if ($(this).attr('href') && $(this).attr('href').search('http://www.google.com') > -1) {
        link = $(this);
    }
});

不是最好的解决方案，但我觉得这是一个奇怪的场景。

编辑：如果 Bergis 选择器有效，请使用它。花哨的东西，我刚刚学到了一些东西。

编辑 2：我也注意到你想检查 iframe src 而不是链接源，所以我的帖子基本上是完全错误的。

Answer 3

function aSrcAfterIFrame(document) {
    var elements, result, looking, item, tagName, i, n;
    elements = document.getElementsByTagName('*');
    looking = false;
    for (i = 0, n = elements.length; i < n; i++) {
        item = elements[i];
        tagName = item.tagName.toLowerCase();
        if (looking && tagName === 'a') {
            result = item.href;
            break;
        }   
        if (tagName === 'iframe') {
            if (item.src.indexOf('http://google.com/foo') === 0) {
                looking = true;
            }   
        }   
    }   
    return result;
}

aSrcAfterIFrame(document);
"http://www.foobar.com/lol/wut"