选择具有javascript但不使用jQuery的ID的div的div子对象的img子对象

Question

I want to gather a fairly complicated wrapped set using JavaScript whilst avoiding having to load the jQuery library (or any other library, eg. Sizzle).

Within the following HTML I want to form a wrapped set consisting of every img element:

<div id='slider'>

   <div><img src="../../images/rby/rby (30).jpg" width="720" height="507"></div>
   <div><img src="../../images/rby/rby (18).jpg" width="720" height="507"></div>
   <div><img src="../../images/rby/rby (12).jpg" width="720" height="507"></div>

</div>

I've tried using the querySelectorAll() method mentioned in this answer but I'm unable to generalise the lesson to my own specific needs. Can someone help perhaps?!

Many thanks.

Answer 1

Well, the syntax of querySelectorAll() is the same as jQuery's selector syntax. So, your solution would be:

// If you want only the <img> elements inside <div> elements:
var my_images = document.querySelectorAll('div#slider div img');

// If you want all images inside div#slider:
var my_images = document.querySelectorAll('div#slider img');

Of course, if you don't mind the lack of IE6 / IE7 support, you're good to go!

Answer 2

Like this (note, cross-browser but may not deal with more complex examples as well as .querySelectorAll might, depending)?

var slider = document.getElementById('slider'),
    imgs = slider.getElementsByTagName('img'),
    selected = images = document.querySelectorAll('#slider img');

console.log(imgs);
console.log(selected);

http://jsfiddle.net/h5a4n/1/

(Note, the #slider img was stolen shamelessly from am not i am's answer. Not that I couldn't have figured it out on my own... :P )