本文详解如何使用 JavaScript 的 getElementById() 正确交换两张图片的 src 属性，避免因误赋对象而非字符串导致的图片加载失败问题。
本文详解如何使用 javascript 的 `getelementbyid()` 正确交换两张图片的 `src` 属性，避免因误赋对象而非字符串导致的图片加载失败问题。
在 JavaScript 中，通过元素 ID 操作 DOM 是基础且高频的操作。但初学者常犯的一个典型错误是：将 DOM 元素对象直接赋值给 src 属性，而非其 src 属性的字符串值。这正是原代码无法正常显示图片的根本原因。
回顾原始代码：
<img id="MarioImg" class="mariowonder" src="https://media.gamestop.com/..." / alt="如何通过元素 ID 实现图片切换（JavaScript 教程）" >
<img onclick="SwitchImg1()" id="Img_1" class="mariosideimg" src="https://media.gamestop.com/..." / alt="如何通过元素 ID 实现图片切换（JavaScript 教程）" >
<script>
function SwitchImg1() {
document.getElementById("MarioImg").src = document.getElementById("Img_1");
// ❌ 错误：右侧是 <img alt="如何通过元素 ID 实现图片切换（JavaScript 教程）" > 元素对象，不是 URL 字符串！
}
</script>document.getElementById("Img_1") 返回的是一个 DOM 元素对象，而 src 属性只接受字符串格式的图片 URL。当把整个对象赋给 src 时，浏览器会尝试将其隐式转换为字符串（如 "[object HTMLImageElement]"），最终导致无效路径——这就是你看到“白绿纸片”（即默认的 broken image 占位符）的原因。
✅ 正确做法是：显式获取并交换两个元素的 .src 字符串值。以下是推荐的健壮实现：
java-api-doc-generator
下载
分析 Java Spring Boot 后端 Controller 代码，自动生成 Markdown 格式的接口文档。当用户说“生成 Java 接口文档”、“生成 API 文档”、“从 Spring 代码生成文档”时触发。
立即学习“Java免费学习笔记（深入）”；
<img id="MarioImg" class="mariowonder"
src="https://unsplash.com/photos/RgplfXbxLFs?auto=format&fit=crop&w=300"
alt="Main Mario image" />
<img onclick="switchImages()" id="Img_1" class="mariosideimg"
src="https://unsplash.com/photos/X-Far-t1woI?auto=format&fit=crop&w=300"
alt="Alternate Mario image" />
<script>
function switchImages() {
const mainImg = document.getElementById("MarioImg");
const sideImg = document.getElementById("Img_1");
// ✅ 安全交换：临时存储 src 值（字符串）
const tempSrc = mainImg.src;
mainImg.src = sideImg.src;
sideImg.src = tempSrc;
}
</script>? 关键要点与最佳实践：
- ✅ 始终访问 .src 属性（element.src）来读取或设置图片地址，而非元素本身；
- ✅ 使用 const 声明 DOM 引用，提升可读性与性能；
- ✅ 添加 alt 属性增强可访问性；
- ⚠️ 避免内联事件（如 onclick），推荐采用 addEventListener 解耦逻辑（进阶建议）：
document.getElementById("Img_1").addEventListener("click", switchImages);
? 小结：DOM 操作的核心在于区分元素对象与其属性值。getElementById() 返回对象，而图片切换依赖的是该对象的 src 字符串属性——理解这一区别，是写出可靠交互代码的第一步。
