仅从某些html dom元素获取图像集合

Question

document.images

只能从index或id获取图像集合。

但是我只需要从某个表列中获取图像集合。

var m_images = aData[2];

此变量保存html如下表中的列的内容：

<a href="" target="_blank"><img src="abc.com"></a>&nbsp;&nbsp;
<a href="" target="_blank"><img src="xyz.com"></a>&nbsp;&nbsp;

如何仅从此特定变量获取图像集合？

例如， m_images[0] = <img src="abc.com">, m_images[1] = <img src="xyz.com">

我尝试这样做（很傻） m_images.images但是没有undefined ，这很明显。

Answer 1

您可以使用querySelectorAll获得所有图像，如下所示

var selector = 'img';
// you can change the selector based on your need
images = document.querySelectorAll(selector)
images.forEach(function(item, index){
    console.log("item", item)
    console.log("src", item.src)
});

Answer 2

只需获取行并将其遍历以获取具有图像的列索引。 注意，这个问题尚不清楚，因此我假设一个td单元中可能有多个图像。

 let myColumnIndex = 2; let myrows = document.getElementById('mytableid') .getElementsByTagName("tbody")[0] .getElementsByTagName("tr"); //console.log(myrows); let myimages = []; for (let row = 0; row < myrows.length; row++) { let tdimage = myrows[row] .getElementsByTagName("td")[myColumnIndex] .getElementsByTagName("img"); console.log(tdimage); if (!!tdimage.length) { Array.prototype.forEach.call (tdimage, function (image) { console.log(image); myimages.push(image); }); } } console.log(myimages); 

 <table id="mytableid"> <tbody> <tr> <td>Row 1</td> <td>Image:</td> <td> <a href="" target="_blank"><img src="abc.com"></a>&nbsp;&nbsp;</td> </tr> <tr> <td>Row 2</td> <td>Image:</td> <td> <a href="" target="_blank"><img src="xyz.com"></a>&nbsp;&nbsp;</td> </tr> <tr> <td>Row 2</td> <td>Image:</td> <td> <a href="" target="_blank"><img src="xyz3.com"></a>&nbsp;&nbsp; <a href="" target="_blank"><img src="try3.com"></a>&nbsp;&nbsp;</td> </tr> </tbody> </table>