如何修改特定DOM元素的src属性？附对应HTML结构示例

嘿，这里有几种实用的方法来修改你这个可排序列表里特定DOM元素的图片src属性，分原生JavaScript和jQuery两种场景给你说明：

如果你的项目没有依赖jQuery，用原生JS完全可以搞定，这里分几种常见的定位场景：

1. 通过data-page-id定位目标列表项里的图片 #

这应该是最精准的方式，因为每个列表项都有唯一的data-page-id：

// 先找到对应data-page-id的列表项
const targetListItem = document.querySelector('.sortable-listing[data-page-id="563"]');
// 再在这个列表项里找到图片元素
const targetImg = targetListItem?.querySelector('.sortable-listing-image img');

// 确认找到图片后再修改src，避免报错
if (targetImg) {
  targetImg.src = "你的新图片地址";
  // 如果有srcset属性需要同步修改的话，加上这行
  // targetImg.srcset = "你的响应式图片地址集合";
}

小贴士：用?.可选链操作符可以避免找不到列表项时出现报错，兼容性比较好的现代浏览器都支持~

2. 通过其他属性（比如alt）批量修改图片 #

如果你需要修改所有alt为"Payments"的图片，可以这么写：

// 找到所有符合条件的图片
const targetImgs = document.querySelectorAll('.sortable-listings-container img[alt="Payments"]');

// 遍历修改每个图片的src
targetImgs.forEach(img => {
  img.src = "你的新图片地址";
});

如果你的项目里已经用了jQuery，代码会更简洁：

1. 通过data-page-id定位修改 #

直接链式选择到目标图片并修改src：

$(document).ready(function() {
  // 精准定位到data-page-id=563的列表项里的图片
  $('.sortable-listing[data-page-id="563"] .sortable-listing-image img').attr('src', '你的新图片地址');
});

2. 按索引修改特定位置的图片 #

比如修改第一个列表项里的图片：

$(document).ready(function() {
  $('.sortable-listings-container .sortable-listing:first .sortable-listing-image img').attr('src', '你的新图片地址');
});

重要提醒 #

不管用哪种方法，都要确保代码在DOM加载完成后执行，不然可能找不到元素哦~ 原生JS可以把代码放在DOMContentLoaded事件里，jQuery就用$(document).ready()包裹。

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