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>

我尝试使用this answer中提到的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/

（注意，#slider img被无耻地偷走了，不是我的答案。不是说我不能自己弄明白...... :P）

用JavaScript选择带div的div子的img子，但没有jQuery

2 个答案: