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
– Marc B, Commented Feb 11, 2013 at 20:42
What mark said, and check out this answer: 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
– Paul Richter, Commented Feb 11, 2013 at 20:43

Bergi · Accepted Answer · 2013-02-11 20:45:11Z

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, 2013 at 20:45

Bergi

671k162 gold badges1k silver badges1.5k bronze badges

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

1 Comment

user967451 Over a year ago

I get the error elem is null: var elem = document.querySelector('iframe[src^="http://google.com"] ~ a').innerHTML = 'abc';

Ryan O'Neill · Accepted Answer · 2013-02-11 21:03:22Z

0

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"

answered Feb 11, 2013 at 21:03

Ryan O'Neill

3,75724 silver badges27 bronze badges

Comments

dennmat · Accepted Answer · 2013-02-11 20:50:09Z

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, 2013 at 20:50

answered Feb 11, 2013 at 20:44

dennmat

2,7282 gold badges19 silver badges20 bronze badges

1 Comment

user967451 Over a year ago

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.

Collectives™ on Stack Overflow

How to select this element in JavaScript?

3 Answers 3

1 Comment

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related