JavaScript教程：在两个元素之间交换部分属性

function swapAttributes(el1, el2) {
  // 存储需要保留的数据
  const el1Keeps = [],
    el2Keeps = [];

  // 遍历 el1 的所有属性
  [...el1.attributes].forEach(attr => {
    if (attr.nodeName.startsWith("data-keep-")) {
      // 创建新的对象，存储属性名和值
      el1Keeps.push({
        name: attr.name,
        value: attr.value
      });
    }
  });

  // 遍历 el2 的所有属性
  [...el2.attributes].forEach(attr => {
    if (attr.nodeName.startsWith("data-keep-")) {
      // 创建新的对象，存储属性名和值
      el2Keeps.push({
        name: attr.name,
        value: attr.value
      });
    }
  });

  // 将 el2Keeps 中的属性设置到 el1
  el2Keeps.forEach(keepAttr => {
    el1.setAttribute(keepAttr.name, keepAttr.value)
  })

  // 将 el1Keeps 中的属性设置到 el2
  el1Keeps.forEach(keepAttr => {
    el2.setAttribute(keepAttr.name, keepAttr.value)
  })
}

// 获取元素
let elem1 = document.getElementById("item1");
let elem2 = document.getElementById("item2");
let before = document.getElementById("before");
let after = document.getElementById("after");

// 显示交换前的属性值
before.innerHTML = 'before: ' + showData(elem1, elem2);

// 执行属性交换
swapAttributes(elem1, elem2);

// 显示交换后的属性值
after.innerHTML = 'after: ' + showData(elem1, elem2);

// 用于显示 data 属性的函数
function showData(a, b) {
  let data1 = a.dataset;
  let data2 = b.dataset;
  return data1.keepRow + "," + data1.keepCol + " and " + data2.keepRow + "," + data2.keepCol;
}

<div id="item1" data-keep-row="1" data-keep-col="1">item1</div>
<div id="item2" data-keep-row="2" data-keep-col="2">item2</div>
<p id="before"></p>
<p id="after"></p>

[el1.dataset, el2.dataset] = [el2.dataset, el1.dataset];