如何通过document.getElementsByClassName修改HTML img标签的src属性？

云原生阿岚

2026-5-22

使用document.getElementsByClassName修改img的src属性

没问题，我来给你拆解怎么实现这个需求~

首先要明确：document.getElementsByClassName返回的是一个HTMLCollection（类数组对象），因为页面上可能有多个元素使用同一个类名，所以我们需要先定位到目标的.logo元素，再找到里面的img标签修改src。

步骤1：获取`.logo`元素集合

先拿到所有带logo类的元素：

const logoDivs = document.getElementsByClassName('logo');

步骤2：定位目标img标签

因为你要修改的是第一个（或者唯一的）.logo里的img，所以先通过索引[0]拿到这个div，再用两种方式找到里面的img：

方式一：用`querySelector`（更简洁）

// 先判断是否存在.logo元素，避免报错
if (logoDivs.length > 0) {
  const targetImg = logoDivs[0].querySelector('img');
  // 再判断img是否存在
  if (targetImg) {
    targetImg.src = '你的新图片地址.png';
  }
}

方式二：用`getElementsByTagName`

if (logoDivs.length > 0) {
  const imgsInLogo = logoDivs[0].getElementsByTagName('img');
  if (imgsInLogo.length > 0) {
    imgsInLogo[0].src = '你的新图片地址.png';
  }
}