<img>元素src设置时URL异常转义：&变为&amp;问题排查

问题本质 #

前端团队为移动端需求复制了带有相同id的<img>元素但未同步告知，导致你的JS代码看似执行正常，实则修改的是桌面端被隐藏的重复id元素，而页面上显示的移动端目标元素根本没被代码处理。

为什么会出现outerHTML转义的假象？ #

1. 浏览器通过document.getElementById获取元素时，只会返回DOM中第一个匹配该id的元素——你修改的是那个隐藏的桌面端img，而非页面上可见的移动端img。
2. 你在控制台看到的src/currentSrc正常，是因为JS中直接访问元素属性时，浏览器会自动解码HTML实体；但outerHTML是元素的HTML字符串表示，会按照HTML规范将特殊字符（比如&）转义为&，这是正常行为，只是因为你查看的是错误元素，才误以为是异常。

修复方案 #

1. 清理重复id：检查DOM结构，删除移动端元素的重复id，或者给移动端元素设置唯一id（比如picture-grid-${i}-mobile）。
2. 精准选择元素：如果是响应式场景，避免仅用id选择器，可结合父容器标识或类选择器区分不同端的元素，示例代码：

   pictureURLs.forEach((pic, i) => {
       // 选中桌面端网格下的图片
       const desktopImg = document.querySelector(`.desktop-container #picture-grid-${i}`);
       // 选中移动端网格下的图片
       const mobileImg = document.querySelector(`.mobile-container #picture-grid-${i}-mobile`);
       
       if (desktopImg) {
           desktopImg.src = pic;
           desktopImg.onclick = () => { /* 点击逻辑 */ };
       }
       if (mobileImg) {
           mobileImg.src = pic;
           mobileImg.onclick = () => { /* 点击逻辑 */ };
       }
   })
   

3. 规范约束：项目中严格保证DOM元素id的唯一性，重复id是HTML规范明确禁止的行为，会引发各种难以排查的DOM操作问题。

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