получать коллекции изображений только из определенных элементов HTML HTML

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

Просто возьмите строки и проведите их по индексу столбца, где у них есть изображение. Обратите внимание, вопрос был неясен, поэтому я предположил, что в одной ячейке 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>

Answer 2

Вы можете получить все изображения, используя 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)
});