无需循环即可批量更新多个DOM元素dataset的实现方法咨询

首先明确无法直接替换元素dataset引用的原因：dataset是DOM元素内置的只读访问器属性，仅允许读取其对应的DOMStringMap实例，不允许直接替换整个实例引用，所以直接赋值dataset的方案会失败。

不需要手动遍历的实现方案有两种：

该方案仅需要在初始化时维护关联元素列表，后续更新时不需要手动写遍历逻辑，遍历动作由代理内部自动完成：

// 第一步：收集所有需要同步的DOM元素
const relatedElements = document.querySelectorAll('.target-element-class');

// 第二步：创建共享dataset代理
const sharedDataset = new Proxy({}, {
  set(target, prop, value) {
    target[prop] = value;
    // 代理内部自动同步到所有关联元素
    relatedElements.forEach(el => el.dataset[prop] = value);
    return true;
  },
  get(target, prop) {
    return target[prop];
  }
});

使用时直接操作sharedDataset即可完成全量同步，例如：

// 一次赋值，所有关联元素的dataset.userId自动更新
sharedDataset.userId = '10086';

该方案利用JS原型链继承特性，完全不需要任何遍历操作即可实现同步：

// 第一步：创建共享的DOMStringMap实例（借用临时元素生成）
const tempEl = document.createElement('div');
const sharedMap = tempEl.dataset;
// 可预设初始公共属性
sharedMap.theme = 'dark';
sharedMap.role = 'user';

// 第二步：给所有目标元素的dataset绑定原型，仅需初始化时执行一次
const relatedElements = document.querySelectorAll('.target-element-class');
relatedElements.forEach(el => {
  Object.setPrototypeOf(el.dataset, sharedMap);
});

后续直接修改sharedMap的属性即可全局同步，例如：

// 无需遍历，所有关联元素的dataset.theme自动继承最新值
sharedMap.theme = 'light';

注意事项：如果给单个元素的dataset单独赋值过某个同名属性，该属性会成为元素dataset的自有属性，会屏蔽原型链上的共享值，需要全局同步的属性不要单独给单个元素赋值即可。

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