在JavaScript中访问特定div下的所有项目

Question

Hi i want to access all images under some specific div in javascript.My code is :

<div id="image-container" style="background-image:url(loading.gif)">
        <div class="fade-box" id="image-1"><a href="javascript:GoNext();"><img src="2bscene-logo.gif" alt="" width="330" height="108" border="0" /></a></div>
        <div class="fade-box" id="image-2" style="display: none;"><a href="javascript:GoNext();"><img src="streetgallery-logo.gif" alt="" width="330" height="108" border="0" /></a></div>
        <div class="fade-box" id="image-3" style="display: none;"><a href="javascript:GoNext();"><img src="g4m-logo.gif" alt="" width="330" height="108" border="0" /></a></div>
</div>

While my js code is :

var image_slide = new Array('image-1', 'image-2', 'image-3');

I want to get all DIV s based on id dynamically, not having a predefined array. How can I do that?

Answer 1

By pure javascript, you can try:

var arr = document.querySelectorAll('#image-container img');
for(var i=0;i<arr.length;i++){
    console.log(arr[i].getAttribute('src'))
}

On browsers that support querySelectorAll. (IE8 and up, modern versions of others, not IE7 and down.) - As mentioned in the comment by TJ Crowder

Answer 2

With JavaScript, you can do this easily with the DOM:

var container = document.getElementById("image-container");
var child;
var image_slide = [];
for (child = container.firstChild; child; child = child.nextSibling) {
    if (child.id && child.nodeName === "DIV") {
        image_slide.push(child.id);
    }
}

Live Example | Source

Note that the code above must be run after the elements are already in the DOM. The best way to ensure that is to put the script tag below them in the page (just before the closing </body> element is good).