点击非同Div的Span时移除selected属性问题排查与修复

错误原因 #

你碰到的Uncaught TypeError: Cannot read properties of null，本质是div1span变量值为null，导致无法调用matches()方法。常见触发场景：

• DOM未加载完成就执行JS：如果JS代码写在<head>或HTML结构之前，浏览器还没渲染目标元素，document.querySelector/getElementById会返回null。
• 选择器不匹配：类名/ID拼写错误，或是HTML里根本没有对应div1swatch类的元素，导致找不到目标span。

正确实现方案 #

先解决DOM加载问题 #

把JS代码放在<body>标签末尾，或者用DOMContentLoaded事件包裹，确保目标元素已渲染：

document.addEventListener('DOMContentLoaded', function() {
  // 所有JS逻辑写在这里
});

用事件委托重构跨Div点击逻辑 #

因为涉及多个div的span交互，用事件委托可以避免给每个span单独绑定事件，更简洁高效。核心逻辑：点击某个div内的span时，隐藏其他div并移除其内部span的selected属性，同时给当前点击的span添加该属性。

假设你的HTML结构如下：

<div class="swatch-container" id="div1">
  <span class="swatch selected">选项1</span>
  <span class="swatch">选项2</span>
</div>
<div class="swatch-container" id="div_bottom2">
  <span class="swatch selected">选项A</span>
  <span class="swatch">选项B</span>
</div>
<div class="swatch-container" id="div_bottom3">
  <span class="swatch selected">选项X</span>
  <span class="swatch">选项Y</span>
</div>

对应的JS实现：

document.addEventListener('DOMContentLoaded', function() {
  // 获取所有需要控制的容器div
  const allContainers = document.querySelectorAll('.swatch-container');

  // 事件委托：给document绑定点击事件
  document.addEventListener('click', function(e) {
    // 只处理span元素的点击
    if (e.target.tagName.toLowerCase() !== 'span') return;

    // 获取当前点击span所在的容器div
    const currentContainer = e.target.closest('.swatch-container');
    if (!currentContainer) return;

    // 遍历所有容器，处理隐藏和选中状态
    allContainers.forEach(container => {
      if (container !== currentContainer) {
        // 隐藏非当前容器
        container.style.display = 'none';
        // 移除该容器内所有span的selected属性（如果用class则换成classList.remove）
        container.querySelectorAll('.swatch').forEach(span => {
          span.removeAttribute('selected');
          // 若用class标记选中：span.classList.remove('selected');
        });
      } else {
        // 显示当前容器（根据需求可选）
        container.style.display = 'block';
        // 给当前点击的span添加selected属性（或class）
        e.target.setAttribute('selected', '');
        // 若用class：e.target.classList.add('selected');
      }
    });
  });
});

额外优化建议 #

• 推荐用CSS类（比如selected）代替HTML属性来标记选中状态，更符合前端最佳实践，样式控制也更灵活。
• 给所有容器div加统一类名（比如swatch-container），避免硬编码多个ID，后续新增容器时无需修改JS。
• 事件委托支持动态添加的span元素，后续通过JS新增的span也能自动触发点击逻辑。

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