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

回答

相關問題