如何用JavaScript批量将指定p标签内的span元素设为display:none

最优方案（无遍历开销，性能拉满） #

通过新增CSS规则控制，仅修改外层p标签的类名即可实现所有子span隐藏，完全不需要遍历每个span节点，哪怕span数量超过10万也不会出现性能卡顿。

新增CSS规则 #

#main.hide-child-span > span {
  display: none !important;
}

修改后的JS代码 #

function uncheckAll() {
  document.getElementById('main').classList.add('hide-child-span');
}

该方案优势：

• 仅操作1次DOM，性能开销可以忽略
• 自动匹配所有p标签下的直接子span，兼容动态新增的span，不需要修改JS逻辑
• 不会影响p标签本身的显示，也不会命中p标签内非span的其他元素，完全符合需求

如果后续需要重新显示所有span，只要调用document.getElementById('main').classList.remove('hide-child-span')即可。

备选方案（需要逐个修改span样式场景） #

如果业务逻辑要求必须单独修改每个span的style属性，可以用批量选择器结合for循环实现，比逐个获取ID的方式效率高数十倍：

function uncheckAll() {
  const spanList = document.querySelectorAll('#main > span');
  // 普通for循环性能优于forEach，适合万级以上节点处理
  for (let i = 0; i < spanList.length; i++) {
    spanList[i].style.display = 'none';
  }
}

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