在 Javascript 中交换图像答案

【问题标题】：Swapping images in Javascript在 Javascript 中交换图像
【发布时间】：2020-12-01 15:22:20
【问题描述】：

终于从JS开始了，我有个问题。

为什么这段代码不起作用（我在 HTML 中有两张带有 fir 和 sec Id 的图像）

function swap() {
  let x = document.getElementById("fir").src
  let y = document.getElementById("sec").src

  let z = x
  x = y
  y = z
}

但是这个可以

function swap() {
  let x = document.getElementById("fir")
  let y = document.getElementById("sec")

  let z = x.src

  x.src = y.src
  y.src = z
}

【问题讨论】：

【解决方案1】：

这是因为 document.getElementById("fir").src 返回图像的路径（字符串），而在第二种情况下，您正在操作 DOM（引用）。您可以在这两种情况下控制日志或应用断点输出并检查发生了什么。

【讨论】：

【解决方案2】：

第一个不起作用的原因是，当您交换了变量指向的元素时，您并没有更改元素本身。有几种交换元素的方法（您已经发布并测试了其中一种）

交换源字段
交换 externalHTML（z = x.outerHTML；x = y.outerHTML；y = z.outerHtML）
移动实际元素 (z = x.nextSibling; y.parentNode.insertBefore(x,y); z.parentNode.insertBefore(y,z);

示例 3 实际上是不完整的：您还需要处理没有 nextSibling 的情况。但希望这能让您更深入地了解尝试 1 和 2 正在做什么以及如何更改和操作元素

【讨论】：