如何封装结合querySelectorAll与forEach的可复用JavaScript函数？

存在的问题 #

• 重复ID不符合规范：HTML 要求id属性全局唯一，使用#o作为选择器调用querySelectorAll仅能匹配到第一个id为o的元素，无法选中多个目标元素，建议改用class类选择器标记需要批量操作的元素。
• 动态属性访问语法错误：函数内使用e.y访问属性时，点语法会将y识别为固定的属性名，而非你传入的参数变量，访问动态属性需要使用方括号语法e[y]。
• 参数传递逻辑错误：调用q('#o', innerHTML = 'Working')时，innerHTML = 'Working'是赋值表达式，实际传入的第二个参数仅为字符串Working，没有传递要操作的属性名，函数无法识别要修改的目标属性。

优化后的可复用工具函数 #

修正后的HTML #

<p class="o">one</p>
<p class="o">two</p>

工具函数实现 #

支持两种调用模式：批量设置属性、传入回调执行自定义操作，满足高频调用的多种场景需求：

function q(selector, operation, value) {
  const elements = document.querySelectorAll(selector)
  // 模式1：传入回调函数，对所有匹配元素执行自定义逻辑
  if (typeof operation === 'function') {
    elements.forEach(operation)
    return elements
  }
  // 模式2：传入属性名和属性值，批量设置所有匹配元素的对应属性
  if (value !== undefined) {
    elements.forEach(el => {
      el[operation] = value
    })
  }
  return elements
}

调用示例 #

// 批量设置所有.o元素的innerHTML为Working
q('.o', 'innerHTML', 'Working')

// 执行自定义逻辑：给所有.o元素设置红色字体、添加自定义属性
q('.o', el => {
  el.style.color = 'red'
  el.dataset.customAttr = 'test'
})

内容的提问来源于stack exchange，提问作者Mehedi Al Imran