DOM元素可见性对JavaScript的影响？重复id元素更新问题咨询

嘿，这个问题问得很贴合实际开发场景！先给你一个明确的结论：HTML规范强制要求id属性在整个DOM树中必须唯一——哪怕两个元素永远不会同时显示，这条规则也绝对不能打破。

你遇到的“只有第一个元素被更新”的问题，根源就在这里：浏览器的document.getElementById()方法是严格按照规范实现的，它只会返回DOM中第一个匹配该id的元素，完全不会考虑元素是否可见。所以不管屏幕尺寸怎么变，你代码里的这个方法永远只会找到第一个#test。

那针对你的响应式场景，怎么解决这个问题呢？给你几个实用的方案：

方案1：用class替代重复id，结合媒体查询选择元素 #

把重复的id改成class，然后根据当前屏幕尺寸选择对应的可见元素：

<div class="visible-lg visible-md">
  <div class="test"></div>
</div>
...
<div class="visible-sm visible-xs">
  <div class="test"></div>
</div>
<script>
let targetElement;
// 根据你的响应式框架断点调整宽度值（这里以Bootstrap的md断点为例）
if (window.innerWidth >= 768) {
  targetElement = document.querySelector('.visible-lg .test');
} else {
  targetElement = document.querySelector('.visible-sm .test');
}
if (targetElement) {
  targetElement.innerHTML = "this text";
}
</script>

方案2：给元素设置唯一id，通过屏幕尺寸判断目标 #

给两个元素分别设置不同的唯一id，然后根据当前屏幕大小选择对应的id：

<div class="visible-lg visible-md">
  <div id="test-desktop"></div>
</div>
...
<div class="visible-sm visible-xs">
  <div id="test-mobile"></div>
</div>
<script>
// 同样根据断点判断目标id
const targetId = window.innerWidth >= 768 ? 'test-desktop' : 'test-mobile';
document.getElementById(targetId).innerHTML = "this text";

// 要是需要监听屏幕尺寸变化（比如用户拖拽窗口），可以加个监听事件
window.addEventListener('resize', () => {
  const newTargetId = window.innerWidth >= 768 ? 'test-desktop' : 'test-mobile';
  document.getElementById(newTargetId).innerHTML = "this text";
});
</script>

方案3：利用window.matchMedia精准匹配响应式断点 #

如果你的项目用了像Bootstrap这样的框架，可以直接用框架的断点媒体查询来更精准地判断：

// 匹配Bootstrap的md及以上屏幕
const desktopMedia = window.matchMedia('(min-width: 768px)');

function updateTestElement() {
  const targetElement = desktopMedia.matches 
    ? document.getElementById('test-desktop') 
    : document.getElementById('test-mobile');
  targetElement.innerHTML = "this text";
}

// 初始化更新
updateTestElement();
// 监听屏幕尺寸变化
desktopMedia.addEventListener('change', updateTestElement);

最后再提醒一句：除了getElementById的问题，重复id还可能引发CSS样式异常、第三方脚本兼容问题等隐藏bug，所以从代码规范的角度，一定要保证id的唯一性哦！

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