您好我想在javascript中访问某些特定div下的所有图片。我的代码是:
<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>
虽然我的js代码是:
var image_slide = new Array('image-1', 'image-2', 'image-3');
我希望动态地根据DIV
获取所有id
,而不是拥有预定义的数组。我怎么能这样做?
答案 0 :(得分:1)
通过纯JavaScript,您可以尝试:
var arr = document.querySelectorAll('#image-container img');
for(var i=0;i<arr.length;i++){
console.log(arr[i].getAttribute('src'))
}
在支持querySelectorAll的浏览器上。 (IE8及以上,其他版本的现代版本,不是IE7版本。) - 正如T.J.的评论中提到的那样。克劳德
答案 1 :(得分:0)
使用JavaScript,您可以使用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);
}
}
请注意,上面的代码必须在元素已经在DOM中之后运行。确保这一点的最佳方法是将script
标记放在页面下方(恰好在结束</body>
元素之前)。