JavaScript中如何批量选中多个ID元素简化重复classList操作？

你可以使用CSS属性前缀选择器配合querySelectorAll批量选中所有id以item-link开头的元素，优化后的代码如下：

基础优化版（保留原函数逻辑） #

// 提前缓存DOM元素，避免每次调用函数重复查询DOM，提升性能
const sideOpen1 = document.getElementById('side-open1')
// 选中所有id以item-link开头的元素
const itemLinks = document.querySelectorAll('[id^="item-link"]')

function side1() {
  sideOpen1.classList.remove('side-open-dpn')
  itemLinks.forEach(el => el.classList.add('side-open-dpn'))
}

function back1() {
  sideOpen1.classList.add('side-open-dpn')
  itemLinks.forEach(el => el.classList.remove('side-open-dpn'))
}

如果担心页面存在其他id以item-link开头的无关元素，也可以用逗号分隔的选择器精确指定5个元素：

const itemLinks = document.querySelectorAll('#item-link1, #item-link2, #item-link3, #item-link4, #item-link5')

进阶精简版（合并逻辑） #

两个函数逻辑完全相反，可以合并为一个切换函数进一步精简代码：

const sideOpen1 = document.getElementById('side-open1')
const itemLinks = document.querySelectorAll('[id^="item-link"]')
const hideClass = 'side-open-dpn'

// 传入true对应原side1效果，传入false对应原back1效果
function toggleSide(isShowSide) {
  sideOpen1.classList.toggle(hideClass, !isShowSide)
  itemLinks.forEach(el => el.classList.toggle(hideClass, isShowSide))
}

classList.toggle的第二个参数是布尔值，为true时强制添加类，为false时强制移除类，正好适配两种相反的操作逻辑。

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