本文介绍了如何在 JavaScript 中高效地交换两个 DOM 元素的部分属性，重点关注 data-* 属性的交换。通过创建属性对象的副本，避免了直接修改原始属性引用导致的问题。同时，探讨了 dataset 属性的局限性，并提供了一种可行的解决方案。
交换指定属性
在某些场景下，我们需要交换两个 DOM 元素的部分属性，而不是全部属性。例如，我们可能只想交换以 data-keep- 开头的自定义数据属性。以下代码展示了如何实现这一目标：
function swapAttributes(el1, el2) {
// 保存需要保留的数据
const el1Keeps = [],
el2Keeps = [];
[...el1.attributes].forEach(attr => {
if (attr.nodeName.startsWith("data-keep-")) {
el1Keeps.push({
name: attr.name,
value: attr.value
});
}
});
[...el2.attributes].forEach(attr => {
if (attr.nodeName.startsWith("data-keep-")) {
el2Keeps.push({
name: attr.name,
value: attr.value
});
}
});
// 将属性设置到另一个元素上
el2Keeps.forEach(keepAttr => {
el1.setAttribute(keepAttr.name, keepAttr.value)
})
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);
function showData(a, b) {
let data1 = a.dataset;
let data2 = b.dataset;
return data1.keepRow + "," + data1.keepCol + " and " + data2.keepRow + "," + data2.keepCol;
}代码解释：
- swapAttributes(el1, el2) 函数： 接受两个 DOM 元素 el1 和 el2 作为参数。
- el1Keeps 和 el2Keeps 数组： 用于存储需要交换的属性。
- 循环遍历属性： 使用 [...el1.attributes].forEach() 和 [...el2.attributes].forEach() 遍历两个元素的属性。
- 属性过滤： 使用 attr.nodeName.startsWith("data-keep-") 过滤出以 data-keep- 开头的属性。
- 创建属性副本： 将符合条件的属性的 name 和 value 复制到新的对象中，并添加到相应的 el1Keeps 或 el2Keeps 数组中。关键在于这里创建了新的对象，避免了直接操作原始属性引用。
- 属性交换： 循环遍历 el2Keeps 和 el1Keeps 数组，使用 el1.setAttribute(keepAttr.name, keepAttr.value) 和 el2.setAttribute(keepAttr.name, keepAttr.value) 将属性设置到相应的元素上。
HTML 示例：
立即学习“Java免费学习笔记（深入）”；
<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>
注意事项
- 属性引用问题： 直接保存 attr 对象会导致问题，因为它们是原始对象属性的引用。后续对这些对象的修改会影响原始元素。因此，需要创建新的对象来存储属性的 name 和 value。
- 性能考虑： 对于属性数量非常多的元素，循环遍历属性可能会影响性能。可以考虑使用更高效的方法，例如使用 querySelectorAll 选择器直接选择目标属性。
- dataset 的局限性： 虽然可以使用 [el1.dataset, el2.dataset] = [el2.dataset, el1.dataset] 尝试交换 dataset，但 dataset 是一个只读属性，不能直接赋值。只能单独赋值 element.dataset.XXX。
总结
通过创建属性对象的副本，我们可以安全地交换 DOM 元素的部分属性，避免了直接修改原始属性引用导致的问题。虽然 dataset 属性提供了一种方便的方式来访问 data-* 属性，但它具有只读的局限性。在实际应用中，需要根据具体情况选择合适的解决方案。 这种方法可以应用于更广泛的属性交换场景，只需修改属性过滤条件即可。
