Question

I am using a script called swipeview to put multiple instances of a gallery on a page. It generates the structure like this:

<div id="slider-1">
    <div id="swipeview-slider">
        <div id="swipeview-masterpage">
            <img src="images/01.jpg" id="one"/>
        </div>
        <div id="swipeview-masterpage" class="swipeview-active">
            <img src="images/02.jpg" id="two"/>
        </div>
    </div>
</div>
<div id="slider-2">
    <div id="swipeview-slider">
        <div id="swipeview-masterpage">
            <img src="images/01.jpg" id="one"/>
        </div>
        <div id="swipeview-masterpage" class="swipeview-active">
            <img src="images/02.jpg" id="two"/>
        </div>
    </div>
</div>

The only thing that is unique to each image is the top-level div ID (slider-1, slider-2).

Without using jQuery, how can I get the ID of each separate image within the ‘swipeview-active’ class?

With jQuery I would select them with something along these lines:

$('#slider-1 > .swipeview-slider > .swipeview-masterpage .swipeview-active > img ').attr('id');

How can I do achieve this in regular js?

Answer 1

First of all: IDs must not start with a digit.
The dot-selector selects elements by class name. Use class=.. instead of id=....

Corrected code, using document.querySelectorAll (demo: http://jsfiddle.net/rGAkm/3/).

var images = document.querySelectorAll('#slider-1 > .swipeview-slider > .swipeview-masterpage .swipeview-active > img[id]');
var len = images.length;
var output = document.getElementById('output');
for (var i=0; i<len; i++) {
    var image = images[i];
    output.appendChild(image);
}

Replace #slider-1 with [id^="slider-"] if you want to select all images in this structure, which is a child of id="slider-1", id="slider-2", …