如何编写基于querySelectorAll的简易选择器函数 模拟jQuery的css、html方法

现有代码的核心问题是 document.querySelectorAll() 返回的是NodeList类数组集合，而非单个DOM元素，直接对集合操作 innerHTML 不会生效，需要遍历集合中的每个元素执行对应逻辑。

以下是实现了.html()和.css()方法的完整可运行代码，行为对齐jQuery的对应方法：

const $ = (selector) => {
  // 存储匹配到的所有DOM元素
  const elements = document.querySelectorAll(selector);

  return {
    // 模拟.html()方法：无参返回第一个元素内容，有参批量设置所有元素内容
    html: function(content) {
      if (content === undefined) {
        return elements[0] ? elements[0].innerHTML : undefined;
      }
      elements.forEach(el => el.innerHTML = content);
      // 支持链式调用
      return this;
    },

    // 模拟.css()方法：仅传属性名返回第一个元素的对应样式，传属性+值批量设置所有元素样式
    css: function(prop, value) {
      if (value === undefined) {
        return elements[0] ? getComputedStyle(elements[0])[prop] : undefined;
      }
      elements.forEach(el => el.style[prop] = value);
      // 支持链式调用
      return this;
    }
  }
};

调用示例 #

// 批量设置所有p标签的内容
$('p').html('更新后的文本');
// 获取第一个p标签的内容
console.log($('p').html());

// 批量设置所有类名为box的元素的文字颜色
$('.box').css('color', '#f00');
// 获取第一个类名为box的元素的文字颜色
console.log($('.box').css('color'));

// 链式调用
$('div').html('链式调用测试').css('fontSize', '18px');

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