本文旨在指导开发者如何在两个 HTML 元素之间高效、准确地交换特定的属性子集。通过避免直接引用原始属性对象，并创建新的属性对象进行交换，可以有效防止数据污染。本文将提供详细的代码示例和注意事项，帮助你轻松实现属性交换功能。
理解属性交换的挑战
在操作 DOM 时，经常会遇到需要在两个或多个元素之间交换属性的情况。直接交换所有属性可能很简单，但有时我们需要更精细的控制，只交换一部分属性，例如只交换以 data- 开头的自定义数据属性。
一个常见的错误是直接保存 attr 对象，因为这些对象是对原始元素属性的引用。当你在后续调用 setAttribute() 方法时，实际上修改的是原始对象的属性，这可能导致意想不到的结果。
正确的属性交换方法
为了避免上述问题，正确的做法是在保存需要交换的属性时，创建新的属性对象，而不是直接引用原始属性。
立即学习“Java免费学习笔记（深入）”；
以下是一个示例，展示了如何交换两个元素之间以 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;
}对应的 HTML 结构如下：
<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>
在这个例子中，我们首先遍历每个元素的属性，找到以 data-keep- 开头的属性，然后将这些属性的 name 和 value 创建新的对象并存储到 el1Keeps 和 el2Keeps 数组中。最后，我们遍历这些数组，使用 setAttribute() 方法将属性设置到对应的元素上。
尝试使用 dataset API
你可能想到使用 dataset API 来简化代码，例如：
[el1.dataset, el2.dataset] = [el2.dataset, el1.dataset];
但是，这种方法是行不通的，因为 dataset 是一个只读属性。你只能赋值给 element.dataset.XXX，而不能直接赋值给 element.dataset 本身。
总结
在 JavaScript 中交换 DOM 元素的属性子集时，务必注意不要直接引用原始属性对象。通过创建新的属性对象，可以避免数据污染，确保代码的正确性和可维护性。虽然 dataset API 看起来很方便，但在这种情况下并不适用。理解这些细节可以帮助你编写更健壮的 DOM 操作代码。
