更换WordPress主题后JS修改图片src报错及DOM操作问题求助

背景 #

更换WordPress主题后，旧站点可用的JS代码在新站点失效，核心原因是DOM结构发生变更：

旧站点DOM结构 #

<img src="http://somewhereRemoved.jpg" class="header-img" />

旧站点可正常运行的代码 #

var img = document.getElementsByClassName("header-img");    // 该类仅包含一个元素
img[0].src = "http://somewhereRemoved.gif"+"?a="+Math.random();

新站点DOM结构 #

新站点仅允许为父元素设置Class和Id，无法直接修改图片的属性：

<figure class="wp-block-image size-large v12-OurHeroImage" id="V12-OurHeroImage">
   <img decoding="async" width="1024" height="341" src="http://somewhereRemoved-1024x341.jpg" alt="" class="wp-image-1045" srcset="http://somewhereRemoved-1024x341.jpg 1024w, http:/somewhereRemoved-600x200.jpg 600w, http://somewhereRemoved-300x100.jpg 300w, http://somewhereRemoved-768x256.jpg 768w, http://somewhereRemoved-240x80.jpg 240w, http://somewhereRemoved.jpg 1200w" sizes="(max-width: 1024px) 100vw, 1024px" />
</figure>

问题1：首次尝试代码的错误原因 #

尝试代码 #

var img = document.getElementById('wp-image-1045');    // 假设该元素唯一
img[0].src = "http://somewhereRemoved.gif"+"?a="+Math.random(); 

报错信息 #

Uncaught TypeError: Cannot set properties of undefined (setting 'src')

核心原因 #

document.getElementById()返回的是单个DOM元素对象（找到匹配元素时），而非类数组集合，不需要用[0]取索引。错误地对单个元素使用数组索引，导致img[0]为undefined，无法设置src属性。

问题2：通过父元素引用代码的错误点 #

尝试代码 #

let content = document.getElementsByClassName('v12-OurHeroImage');
let firstChild = content.firstChild.nodeName;
img[0].src = "http://somewhereRemoved.gif"+"?a="+Math.random(); 

报错信息 #

Uncaught TypeError: Cannot read properties of undefined (reading 'nodeName')

错误细节 #

1. document.getElementsByClassName()返回的是HTMLCollection类数组对象，需先通过索引（如content[0]）获取具体父元素节点，才能调用firstChild；
2. 代码中img变量未定义，直接使用img[0]会触发报错；
3. firstChild可能获取到空白文本节点（HTML换行/空格导致），应使用firstElementChild获取第一个子元素节点。

补充问题：修正后仍报错的原因 #

补充代码与DOM结构 #

<figure class="wp-block-image size-large v12-OurHeroImage" id="V12-OurHeroImage">
   <img decoding="async" width="1024" height="341" src="http://somewhereRemoved-1024x341.jpg" alt="" class="wp-image-1045" srcset="http://somewhereRemoved-1024x341.jpg 1024w, http://somewhereRemoved-600x200.jpg 600w, http://somewhereRemoved-300x100.jpg 300w, http://somewhereRemoved-768x256.jpg 768w, http://somewhereRemoved-240x80.jpg 240w, http://somewhereRemoved.jpg 1200w" sizes="(max-width: 1024px) 100vw, 1024px">
</figure>

var img = document.getElementsByClassName("wp-image-1045");    // 认为该类仅一个元素
    img[0].src = "http://somewhereRemoved.gif"+"?a="+Math.random();

报错信息 #

Uncaught TypeError: Cannot set properties of undefined (setting 'src')

原因分析（与srcset无关） #

1. DOM加载顺序问题：如果JS代码写在<figure>元素之前，执行时DOM尚未渲染完成，getElementsByClassName()会返回空集合，img[0]即为undefined；
2. 元素不存在或类名错误：实际页面中可能没有wp-image-1045类的元素，或类名拼写有误；

可靠的修正代码 #

// 等待DOM完全加载后执行
document.addEventListener('DOMContentLoaded', function() {
  // 通过父元素ID定位，再查找内部的img元素
  const heroFigure = document.getElementById('V12-OurHeroImage');
  if (heroFigure) {
    const img = heroFigure.querySelector('img');
    if (img) {
      img.src = "http://somewhereRemoved.gif"+"?a="+Math.random();
      // 若需要同步更新srcset（可选操作）
      img.srcset = ""; // 清空或设置对应srcset内容
    }
  }
});

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