Can I create a Javascript selector from an array of elements?

Question

I'm managing a tree of iFrames (all nested on a page) by id and src, so for a given src I can return an array of elements leading to this iFrame, like so:

["document", "123123", "dasd321"]

Since the number of elements in my array is dynamic, I would now like to construct a selector to retrieve the window to send a postMessage to. So I would need something like this:

document
    .getElementById("123123").contentWindow
    .getElementById("dasd321").contentWindow
    ...
    ... postMessage({"foo":"bar"}, window.location.href);

to be constructed dynamically.

Question:
Is it possible at all to generate a dynamic selector by looping over an array? If so or if not, how would I go about this?

Thanks!

Answer 1

target = ["document", "123123", "dasd321"].reduce (function (tgt, o) {
  return tgt && tgt.getElementById (o);
}, document);

should do the trick. returns null if any of your components do not exist

Answer 2

This could easily be done with:

["document", "123123", "dasd321"].forEach(function(o){
    document.getElementById(o).contentWindow //and so on
});

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach?redirectlocale=en-US&redirectslug=JavaScript%2FReference%2FGlobal_Objects%2FArray%2FforEach

Answer 3

You could use querySelectorAll:

var elements = ['#document', '#123123', '#dasd321'];
elements = document.querySelectorAll(elements.join(','));

[].forEach.call(elements, function(element) {
  // do something with `element`
});