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!