如何用JavaScript选择父div下除指定元素外的所有子元素

实现方案 #

你可以通过以下两种常见方式实现批量选择排除指定子元素的需求：

1. 使用:not()伪类选择器直接筛选
   这是最简洁的实现方式，直接通过选择器完成过滤，无需额外判断：

// 示例：选中#pages下除id为page-2之外的所有div子元素
const otherPages = document.querySelectorAll('#pages > div:not(#page-2)')
// 批量设置隐藏
otherPages.forEach(page => page.style.display = 'none')
// 单独设置需展示的元素
document.getElementById('page-2').style.display = 'block'

2. 遍历所有子元素动态判断
   兼容性更强，也适合需要动态切换排除项的场景：

const allPages = document.querySelectorAll('#pages > div')
const showPageId = 'page-2' // 替换为你需要保留展示的元素id
allPages.forEach(page => {
  page.style.display = page.id === showPageId ? 'block' : 'none'
})

注意事项 #

你原代码中的getElementbyId拼写有误，正确写法为getElementById（中间的B为大写），否则会触发语法报错。

内容的提问来源于stack exchange，提问作者Leila K.