如何隐藏ID不在指定数组内的所有页面DOM元素

核心思路 #

先拿到允许展示的ID集合，遍历所有带ID的目标元素，对不在允许集合内的元素移除shown类即可实现你的预期效果。

代码实现 #

现代浏览器版本（推荐） #

const allowIds = ['id1', 'id2'];
// 转Set提升查询效率，ID数量越多性能优势越明显
const allowIdSet = new Set(allowIds);
// 如果你需要匹配所有带ID的元素，把选择器替换为 '[id]'
document.querySelectorAll('div[id]').forEach(element => {
  if (!allowIdSet.has(element.id)) {
    // 移除展示类，和你预期结果完全匹配
    element.classList.remove('shown');
    // 如果需要直接隐藏元素，可补充下行代码
    // element.style.display = 'none'
  }
})

低版本浏览器兼容版本 #

如果需要兼容不支持Set和箭头函数的旧浏览器，可以用以下写法：

var allowIds = ['id1', 'id2'];
var elements = document.querySelectorAll('div[id]');
for (var i = 0; i < elements.length; i++) {
  var el = elements[i];
  if (allowIds.indexOf(el.id) === -1) {
    el.classList.remove('shown');
  }
}

补充说明 #

• 要是你的场景里元素隐藏不需要依赖shown类控制，直接给不在允许列表的元素设置display: none即可实现隐藏
• 上述代码默认只匹配带ID的div元素，要是你需要筛选所有类型的元素，把querySelectorAll的参数改成'[id]'即可

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