JavaScript 如何通过图片src属性定位元素并触发程序化点击

• 原生DOM并未内置按src属性直接查询img元素的方法，我们可以基于现有DOM的属性选择能力封装逻辑，完全实现document.getElementBySrc('images/x.jpg').click()的调用效果。

封装时需要同时兼容两种src取值场景：一是img标签源码中写入的原始相对路径，二是浏览器解析后存储在元素上的绝对路径值，避免路径格式差异导致匹配失败。

可直接复用的方法实现 #

// 为document对象扩展按src查询img元素的方法
document.getElementBySrc = function(targetSrc) {
  const imgList = document.querySelectorAll('img');
  for (const img of imgList) {
    // 同时匹配源码写入的原始src值、浏览器解析后的完整src值
    if (img.getAttribute('src') === targetSrc || img.src === targetSrc) {
      return img;
    }
  }
  // 匹配不到时返回null，和原生DOM查询方法的行为保持一致
  return null;
}

使用注意事项 #

• 多元素匹配逻辑：如果页面存在多个相同src的img元素，该方法默认返回第一个匹配到的元素；如果需要批量操作全部匹配元素，可以修改逻辑收集所有符合条件的元素为数组后统一处理。
• 路径兼容性处理：如果实际场景中src存在相对路径、绝对路径、带URL参数等格式差异，可以在匹配前先将目标src做路径标准化处理，和img的实际src值做规则统一后再比对，减少匹配失败的情况。
• 调用前做空值判断：拿到匹配结果后先判断元素是否存在，再执行点击操作，避免空引用报错，标准调用示例如下：

const targetImg = document.getElementBySrc('images/x.jpg');
if (targetImg) {
  targetImg.click();
}

内容的提问来源于stack exchange，提问作者Emerson