JavaScript：在两个元素之间交换属性子集-js教程-PHP中文网

JavaScript：在两个元素之间交换属性子集

DDD

发布： 2025-07-14 17:38:01

原创

686人浏览过

javascript：在两个元素之间交换属性子集

本文旨在指导开发者如何在两个 HTML 元素之间高效、准确地交换特定的属性子集。通过避免直接引用原始属性对象，并创建新的属性对象进行交换，可以有效防止数据污染。本文将提供详细的代码示例和注意事项，帮助你轻松实现属性交换功能。

理解属性交换的挑战

在操作 DOM 时，经常会遇到需要在两个或多个元素之间交换属性的情况。直接交换所有属性可能很简单，但有时我们需要更精细的控制，只交换一部分属性，例如只交换以 data- 开头的自定义数据属性。

一个常见的错误是直接保存 attr 对象，因为这些对象是对原始元素属性的引用。当你在后续调用 setAttribute() 方法时，实际上修改的是原始对象的属性，这可能导致意想不到的结果。

正确的属性交换方法

为了避免上述问题，正确的做法是在保存需要交换的属性时，创建新的属性对象，而不是直接引用原始属性。

立即学习“Java免费学习笔记（深入）”；

以下是一个示例，展示了如何交换两个元素之间以 data-keep- 开头的属性：

Swapface人脸交换

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

查看详情

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 操作代码。

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