JavaScript 中交换两个元素的部分属性-js教程-PHP中文网

JavaScript 中交换两个元素的部分属性

聖光之護

发布： 2025-07-14 17:44:22

原创

542人浏览过

javascript 中交换两个元素的部分属性

本文介绍了如何在 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 示例：

Swapface人脸交换

一款创建逼真人脸交换的AI换脸工具

查看详情

立即学习“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-* 属性，但它具有只读的局限性。在实际应用中，需要根据具体情况选择合适的解决方案。这种方法可以应用于更广泛的属性交换场景，只需修改属性过滤条件即可。

以上就是JavaScript 中交换两个元素的部分属性的详细内容，更多请关注php中文网其它相关文章！