如何获取并替换id以WMFStream结尾的span内嵌套img的src

你不需要单独定位中间嵌套的无标识div，直接通过后缀匹配找到外层span后，向下检索内部img元素即可完成操作。

基础实现（DOM已静态渲染场景） #

直接使用CSS属性后缀选择器匹配外层容器，原生JS即可完成需求，代码如下：

// 匹配id以WMFStream结尾的span元素
const streamContainer = document.querySelector('span[id$="WMFStream"]');

if (streamContainer) {
  // 直接查找容器内的img节点，无需单独定位中间div
  const targetImg = streamContainer.querySelector('img');
  if (targetImg) {
    // 获取原始src属性值（如需带域名的绝对路径可直接用targetImg.src）
    const originalSrc = targetImg.getAttribute('src');
    // 替换为自定义资源地址
    targetImg.setAttribute('src', '替换为你的自定义资源URL');
    // 后续如需使用原始src，直接调用originalSrc变量即可
  }
}

常见选不到元素的原因及适配方案 #

• 执行时机过早：如果JS在DOM渲染完成前执行，会无法找到节点。可以把代码放在DOMContentLoaded事件回调中执行，或者把脚本标签放到页面body末尾。

document.addEventListener('DOMContentLoaded', () => {
  // 把上面的基础实现代码放到这里即可
});

• 内部节点为动态渲染：如果span里的div、img是后续异步加载插入的，初始化时直接查找会拿不到元素，可使用MutationObserver监听容器内容变化，等img渲染完成后再操作：

const streamContainer = document.querySelector('span[id$="WMFStream"]');
if (streamContainer) {
  const observer = new MutationObserver(() => {
    const targetImg = streamContainer.querySelector('img');
    if (targetImg) {
      const originalSrc = targetImg.getAttribute('src');
      targetImg.setAttribute('src', '替换为你的自定义资源URL');
      // 操作完成后断开监听，避免重复触发
      observer.disconnect();
    }
  });
  // 监听容器所有子节点的增删变化
  observer.observe(streamContainer, {
    childList: true,
    subtree: true
  });
}

补充说明 #

• 选择器span[id$="WMFStream"]中$=是CSS属性选择器的后缀匹配语法，专门用来匹配属性值以指定字符串结尾的元素，精准匹配你提到的id规则。
• 如果页面存在多个id以WMFStream结尾的span，把querySelector换成querySelectorAll，遍历返回的节点列表逐个处理即可。

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