Image collection in DIV

Question

我想获得图像源，但我的代码不起作用。我的代码：

function imagiesFun(){
var container = document.getElementById("imagiesCollectionExampleDiv");
var collection = container.images;
document.getElementById("imagiesResult").innerHTML = ;
var result = "";
var i;
for(i = 0; i < 3; i++){
result = result + container[i].src + "<br>";
}

document.getElementById("imagiesResult").innerHTML = result;
}

<div id="imagiesCollectionExampleDiv">
<img style="width: 20%" src="alfa.img">
<img style="width: 20%" src="beta.img">
<img style="width: 20%" src="gamma.img">
</div>
<button onclick="imagiesFun()">Show sources</button>
<p id="imagiesResult"></p>

也许有人告诉我为什么，请

Answer 1

使用document.querySelectorAll()获取所有图像集合：

var collection = document.querySelectorAll("#imagiesCollectionExampleDiv img");

但是，如果你真的想使用.images，你应该在document上调用它，比如：

var collection = document.images;

注意：您不需要清除结果部分，因为每次单击都会初始化result。

希望这能有所帮助。

function imagiesFun() {
var collection = document.querySelectorAll("#imagiesCollectionExampleDiv img");
//OR 
//var collection = document.images;
var result = "";
for (var i = 0; i < collection.length; i++) {
result = result + collection[i].src + "<br>";
}
document.getElementById("imagiesResult").innerHTML = result;
}

<div id="imagiesCollectionExampleDiv">
<img style="width: 20%" src="alfa.img">
<img style="width: 20%" src="beta.img">
<img style="width: 20%" src="gamma.img">
</div>
<button onclick="imagiesFun()">Show sources</button>
<p id="imagiesResult"></p>

Answer 2

您可以使用querySelectorAll()方法，或者更新代码以使用getElementsByTagName，例如：

function imagiesFun()
{
var container  = document.getElementById("imagiesCollectionExampleDiv"),
collection = container.getElementsByTagName('img');
var i, result = "";

for(i = 0; i < 3; i++)
{
result+= collection[i].src + "<br>";
}

document.getElementById("imagiesResult").innerHTML = result;
}

<div id="imagiesCollectionExampleDiv">
<img style="width: 20%" src="alfa.img">
<img style="width: 20%" src="beta.img">
<img style="width: 20%" src="gamma.img">
</div>
<button onclick="imagiesFun()">Show sources</button>
<p id="imagiesResult"></p>

还请注意，我修改了您代码的以下区域：

• 您在for循环中引用container，而本应引用collection
• 在尝试清除#imagiesResult的内容时，您有一个空白分配(无效)(实际上这是完全多余的)