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

【问题标题】：get image collections from certain html dom elements only仅从某些 html dom 元素获取图像集合
【发布时间】：2019-07-11 09:12:44
【问题描述】：

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，这很明显。

【问题讨论】：

您的问题不清楚。你能补充更多信息吗？
$("table img") 将返回表格内的所有图像标签。这就是你想要的吗？
使用querySelectorAll()，您应该能够过滤掉您想要的元素。例如querySelectorAll('table img') 为您提供表格内的所有图像。
“一个 html 看起来像这样的表格” - 这不是您在此处发布的表格。
document.getElementById('mytableid').getElementsByTagName('img') or document.getElementById('mytableid').getElementsByTagName('td').getElementsByTagName('img') 你也可以看看developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/…

标签： javascript jquery html image dom

【解决方案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)
});

【讨论】：

“仅来自某个表的列”似乎没有在这里解决

【解决方案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>

【讨论】：