本文介绍了如何在 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免费学习笔记（深入）”；
item1item2
注意事项
属性引用问题： 直接保存 attr 对象会导致问题，因为它们是原始对象属性的引用。后续对这些对象的修改会影响原始元素。因此，需要创建新的对象来存储属性的 name 和 value。性能考虑： 对于属性数量非常多的元素，循环遍历属性可能会影响性能。可以考虑使用更高效的方法，例如使用 querySelectorAll 选择器直接选择目标属性。dataset 的局限性： 虽然可以使用 [el1.dataset, el2.dataset] = [el2.dataset, el1.dataset] 尝试交换 dataset，但 dataset 是一个只读属性，不能直接赋值。只能单独赋值 element.dataset.XXX。
总结
通过创建属性对象的副本，我们可以安全地交换 DOM 元素的部分属性，避免了直接修改原始属性引用导致的问题。虽然 dataset 属性提供了一种方便的方式来访问 data-* 属性，但它具有只读的局限性。在实际应用中，需要根据具体情况选择合适的解决方案。 这种方法可以应用于更广泛的属性交换场景，只需修改属性过滤条件即可。
以上就是JavaScript 中交换两个元素的部分属性的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/138637.html
微信扫一扫 
支付宝扫一扫 
