How to select this element in JavaScript?

Question

I can't modify the following 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>

I need to target this element:

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

The requirements are:

the first link after the iframe whose src starts with the domain http://google.com

Since I can't edit the html I can't simply add an id and use document.getElementById. So how can I target the link using just plain js?

DOM operations... run through the DOM tree, find the iframe, then look "after" the iframe for the link. — Marc B, Feb 11 '13 at 20:42
What mark said, and check out this answer: http://stackoverflow.com/a/1088569/877472 I've not really done this all that much, but that answer looks like it might be a good starting point at least. — Paul Richter, Feb 11 '13 at 20:43

score 2 · Answer 1 · answered Feb 11 '13 at 20:45

2

Check out selectors, especially attribute selectors and sibling combinators:

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

You can easily use that in a jQuery selector expression or document.querySelector.

answered Feb 11 '13 at 20:45

Bergi

630,263
148
957
1,375

I get the error elem is null: `var elem = document.querySelector('iframe[src^="http://google.com"] ~ a').innerHTML = 'abc';` – Feb 11 '13 at 20:57

dennmat · Answer 2 · 2013-02-11T20:50:09.963

0

READ EDITS.

Untested but assuming you're using jQuery something like this should do the trick.

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

Not the best solution, however I feel like this is an odd scenario.

EDIT: If Bergis selector works use that. Fancy stuff, I just learned something.

EDIT 2: Also I just noticed you wanted to check the iframe src not the link source so my post is essentially just plain wrong.

edited Feb 11 '13 at 20:50

answered Feb 11 '13 at 20:44

dennmat

2,618
2
17
20

I can't use jquery unfortunately, it's part of a analytics script so it has to be plain js for performance. That's actually why I asked the question. I know how to do this in jquery but not plain js. – Feb 11 '13 at 20:49

score 0 · Accepted Answer · answered Feb 11 '13 at 21:03

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"

How to select this element in JavaScript?

3 Answers3