如何在原生JS中无需显式循环操作DOM元素集合？

你可以自己封装一个简易的DOM工具函数，模拟jQuery的批量操作逻辑，不用手动写循环就能操作一组DOM元素。

基础实现：模拟$().css()方法 #

function $(selector) {
  // 将NodeList转为数组，方便后续遍历
  const elements = Array.from(document.querySelectorAll(selector));

  // 实现css方法，自动遍历所有元素设置样式
  const css = (property, value) => {
    elements.forEach(el => {
      el.style[property] = value;
    });
    // 返回当前对象，支持链式调用
    return this;
  };

  return { css };
}

使用方式 #

和你想要的jQuery写法完全一致：

$(".item").css("color", "#333");

扩展更多方法 #

如果需要更多类似jQuery的功能，可以继续扩展方法，比如添加类、修改文本等：

function $(selector) {
  const elements = Array.from(document.querySelectorAll(selector));

  // 设置样式
  const css = (property, value) => {
    elements.forEach(el => el.style[property] = value);
    return this;
  };

  // 添加类名
  const addClass = className => {
    elements.forEach(el => el.classList.add(className));
    return this;
  };

  // 设置文本内容
  const text = content => {
    elements.forEach(el => el.textContent = content);
    return this;
  };

  return { css, addClass, text };
}

// 链式调用示例
$(".item")
  .css("color", "#333")
  .addClass("highlight")
  .text("批量更新的文本内容");

核心逻辑说明 #

• 用Array.from()把querySelectorAll返回的NodeList转为数组，避免手动处理遍历兼容性。
• 每个工具方法内部自动遍历元素集合执行操作，对外隐藏循环逻辑。
• 返回当前实例对象，支持链式调用，和jQuery的使用体验对齐。

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