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

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

花韻仙語

发布： 2025-07-14 18:26:56

原创

699人浏览过

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

本文介绍了如何使用 JavaScript 在两个 HTML 元素之间交换特定的属性子集。通过避免直接引用原始属性对象，并创建新的属性对象，可以有效地实现属性交换，同时避免潜在的副作用。本文将提供详细的代码示例和解释，帮助你理解并掌握这种属性交换的技术。

属性交换的实现

在前端开发中，经常会遇到需要交换两个 HTML 元素的部分属性的场景。直接操作 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;

}

登录后复制

代码解释：

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

Swapface人脸交换

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

查看详情

swapAttributes(el1, el2) 函数接收两个 HTML 元素 el1 和 el2 作为参数。
el1Keeps 和 el2Keeps 数组用于存储需要保留的属性。
通过 [...el1.attributes] 和 [...el2.attributes] 将元素的属性转换为数组，并使用 forEach 循环遍历每个属性。
attr.nodeName.startsWith("data-keep-") 用于判断属性名是否以 "data-keep-" 开头，如果是，则将其添加到相应的 el1Keeps 或 el2Keeps 数组中。关键在于，这里不是直接保存 attr 对象，而是创建新的对象 {name: attr.name, value: attr.value}。 这是因为直接保存 attr 对象会导致它们成为原始对象属性的引用，后续的 setAttribute() 调用会修改这些引用，从而产生错误的结果。
最后，使用 forEach 循环遍历 el2Keeps 和 el1Keeps 数组，并将属性设置到相应的元素上，完成属性的交换。

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>

登录后复制

为什么不能直接交换 dataset

你可能会想到使用解构赋值来交换 dataset：

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

登录后复制

但是，这种方法是行不通的。因为 dataset 是一个只读属性。你只能赋值给 element.dataset.XXX，而不能直接赋值给 element.dataset。

注意事项

确保你只交换了需要交换的属性，避免修改不应该修改的属性。
在处理大量属性时，可以考虑使用更高效的算法来提高性能。
理解属性的引用关系，避免直接引用原始属性对象，从而避免潜在的副作用。

总结

本文介绍了如何使用 JavaScript 在两个 HTML 元素之间交换特定的属性子集。通过创建新的属性对象，可以有效地实现属性交换，同时避免潜在的副作用。希望本文能够帮助你理解并掌握这种属性交换的技术。

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

大家都在看：

JS注解是什么_ JS注解的概念与基本作用详解 JS注解怎么注释类_ JS类注解的书写规范与实际应用 Karate：展平嵌套列表为单一列表的实用指南 JS中将类数组对象转换为数组的方法_javascript技巧 Karate：高效扁平化嵌套列表为单一列表的教程