使用JavaScript选择im div的div div子元素，但不使用jQuery

我想使用JavaScript来收集相当复杂的包装集，同时避免加载jQuery库（或任何其他库，例如Sizzle）。使用JavaScript选择im div的div div子元素，但不使用jQuery

在下面的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()方法试过，但我无法课程推广到我自己的具体需求。有人可以帮助吗？！

非常感谢。

来源

2012-02-18 bravokiloecho

好吧，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支持，你是好去！

来源

2012-02-18 23:18:14 BenM

'格＃滑块“可以简单地为”＃滑块“，因为应该只有一个”＃滑块“。 – 2012-02-18 23:19:33

'qSA'的语法只与jQuery（Sizzle's）非标准扩展相同。 jQuery包含一长串选择器，这会在'qSA'中导致DOM异常。 – 2012-02-18 23:27:21

是的，但对于OP的目的，语法是相同的。 – BenM 2012-02-18 23:28:55

像这样（注意，跨浏览器，但可能无法处理更复杂的例子以及.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）

来源

2012-02-18 23:18:34

灵感，没有被盗。 :-) – 2012-02-18 23:28:37

使用JavaScript选择im div的div div子元素，但不使用jQuery

回答

相关问题