如何在JavaScript中访问没有ID的img元素

Question

由于我的项目，我试图访问javascript中的img元素，但有一个限制，我无法在html代码中进行更改，这里是代码
我必须使用事件监听器来img怎么办？任何人 ？

<table id="table">
<thead>
    <tr>
        <th>Firstname</th>
        <th>Lastname</th> 
        <th>Profile Pic</th>
    </tr>
</thead>
<tbody>
    <tr>
        <td>Bill</td>
        <td>Gates</td> 
        <td><img src="https://cdn.vox-cdn.com/thumbor/Xqko1Y9prZ6JoHkVERPfK6rJJuE=/0x0:640x427/1200x800/filters:focal(269x163:371x265)/cdn.vox-cdn.com/uploads/chorus_image/image/56196289/billgatestock.0.jpg" /></td>
    </tr>
    <tr>
        <td>Brian</td>
        <td>Bad Luck</td> 
        <td><img src="https://yt3.ggpht.com/-f4r5N2n5nz0/AAAAAAAAAAI/AAAAAAAAAAA/LLysC2ZLPUo/s900-c-k-no-mo-rj-c0xffffff/photo.jpg" /></td>
    </tr>
    <tr>
        <td>Barista</td>
        <td>Hipster</td> 
        <td><img src="http://diffuser.fm/files/2014/02/Hipster.jpg?w=600&h=0&zc=1&s=0&a=t&q=89" /></td>
    </tr>
</tbody>

Answer 1

document.getElementsByTagName("img");

应该为您获取所有img元素

之后，您可以像这样对每个图像执行一个功能

const images = [...document.getElementsByTagName("img")];
images.forEach(image => { /* Do something per image */ });

Answer 2

使用查询选择器全部

var img=document.querySelectorAll('img')
console.log(img[0])
console.log(img[1])
console.log(img[2])

<table id="table">
<thead>
    <tr>
        <th>Firstname</th>
        <th>Lastname</th> 
        <th>Profile Pic</th>
    </tr>
</thead>
<tbody>
    <tr>
        <td>Bill</td>
        <td>Gates</td> 
        <td><img src="https://cdn.vox-cdn.com/thumbor/Xqko1Y9prZ6JoHkVERPfK6rJJuE=/0x0:640x427/1200x800/filters:focal(269x163:371x265)/cdn.vox-cdn.com/uploads/chorus_image/image/56196289/billgatestock.0.jpg" /></td>
    </tr>
    <tr>
        <td>Brian</td>
        <td>Bad Luck</td> 
        <td><img src="https://yt3.ggpht.com/-f4r5N2n5nz0/AAAAAAAAAAI/AAAAAAAAAAA/LLysC2ZLPUo/s900-c-k-no-mo-rj-c0xffffff/photo.jpg" /></td>
    </tr>
    <tr>
        <td>Barista</td>
        <td>Hipster</td> 
        <td><img src="http://diffuser.fm/files/2014/02/Hipster.jpg?w=600&h=0&zc=1&s=0&a=t&q=89" /></td>
    </tr>
</tbody>

Answer 3

您可以使用getElementsByTagName或querySelectorAll获取对所有图像的引用。我不确定您需要将事件侦听器附加到其中的哪一个，因此下面是一个将事件侦听器附加到每个图像的示例：

const images = document.getElementsByTagName('img');

Array.from(images).forEach((image, index) => {
    image.addEventListener('click', event => {
        console.log(`Image ${index} was clicked`)
    })
});

<table id="table">
<thead>
    <tr>
        <th>Firstname</th>
        <th>Lastname</th> 
        <th>Profile Pic</th>
    </tr>
</thead>
<tbody>
    <tr>
        <td>Bill</td>
        <td>Gates</td> 
        <td><img src="https://cdn.vox-cdn.com/thumbor/Xqko1Y9prZ6JoHkVERPfK6rJJuE=/0x0:640x427/1200x800/filters:focal(269x163:371x265)/cdn.vox-cdn.com/uploads/chorus_image/image/56196289/billgatestock.0.jpg" /></td>
    </tr>
    <tr>
        <td>Brian</td>
        <td>Bad Luck</td> 
        <td><img src="https://yt3.ggpht.com/-f4r5N2n5nz0/AAAAAAAAAAI/AAAAAAAAAAA/LLysC2ZLPUo/s900-c-k-no-mo-rj-c0xffffff/photo.jpg" /></td>
    </tr>
    <tr>
        <td>Barista</td>
        <td>Hipster</td> 
        <td><img src="http://diffuser.fm/files/2014/02/Hipster.jpg?w=600&h=0&zc=1&s=0&a=t&q=89" /></td>
    </tr>
</tbody>

Answer 4

将<img>收集到NodeList中并使用for (...of...)进行迭代

以下解决方案可以解决以下情况： <table> 之外的图像，但是您只想要<table>内部的图像。

• 引用<tbody>中的<table>

  

 document.querySelector('tbody')

  

• 在<table>
中收集图像

  

 var images = document.querySelector('tbody').querySelectorAll('img');

  

• images是3 <img>的NodeList。要使用数组或类似数组的对象，您应该对其进行迭代：

  

  for (let img of images) {...

  

• 尽管第一个参数（img）的名称是任意的，但它必须存在。在演示中，每个图像都应具有红色轮廓，这当然仅用于演示。 for...of循环与经典的for(...)循环相似，但功能更广泛，更不易出错。

---

演示

var images = document.querySelector('tbody').querySelectorAll('img');

for (let img of images) {

  img.style.outline = '2px solid tomato';

}

<table>
  <thead>
    <tr>
      <th>Firstname</th>
      <th>Lastname</th>
      <th>Profile Pic</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Bill</td>
      <td>Gates</td>
      <td><img src="https://cdn.vox-cdn.com/thumbor/Xqko1Y9prZ6JoHkVERPfK6rJJuE=/0x0:640x427/1200x800/filters:focal(269x163:371x265)/cdn.vox-cdn.com/uploads/chorus_image/image/56196289/billgatestock.0.jpg" width='100' /></td>
    </tr>
    <tr>
      <td>Brian</td>
      <td>Bad Luck</td>
      <td><img src="https://yt3.ggpht.com/-f4r5N2n5nz0/AAAAAAAAAAI/AAAAAAAAAAA/LLysC2ZLPUo/s900-c-k-no-mo-rj-c0xffffff/photo.jpg" width='100' /></td>
    </tr>
    <tr>
      <td>Barista</td>
      <td>Hipster</td>
      <td><img src="http://diffuser.fm/files/2014/02/Hipster.jpg?w=600&h=0&zc=1&s=0&a=t&q=89" width='100' /></td>
    </tr>
  </tbody>
</table>