Выбор img дочернего элемента div дочернего элемента div с идентификатором JavaScript, но без jQuery

Question

Я хочу собрать довольно сложный упакованный набор, используя JavaScript, избегая при этом необходимости загружать библиотеку jQuery (или любую другую библиотеку, например Sizzle).

В следующем HTML-коде я хочу сформировать упакованный набор, состоящий из каждого img элемента:

<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>

Я пытался использовать метод querySelectorAll(), упомянутый в этом ответе , но я не могу обобщить урок в соответствии со своими конкретными потребностями. Может кто-нибудь помочь, возможно?!

Большое спасибо.

Answer 1

Ну, синтаксис querySelectorAll() такой же, как и синтаксис селектора jQuery.Итак, ваше решение будет выглядеть следующим образом:

// 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');

Конечно, если вы не возражаете против отсутствия поддержки IE6 / IE7, все готово!

Answer 2

Как это (обратите внимание, кросс-браузер, но может не иметь дело с более сложными примерами, а может .querySelectorAll, в зависимости от)?

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/

(Примечание* * * * * * * * * * * * * * * * * * * * * был украден бесстыдно из-за того, что я не являюсь ответом. Не то, чтобы я не мог понять это самостоятельно * :P)