主页 / 问题 / 1506436
Accepted
Артём Ионаш
Asked:2023-03-20 02:01:34 +0000 UTC2023-03-20 02:01:34 +0000 UTC

如何交换 DOM 树的元素？

  • 772

假设我们有两个 DOM 树节点，
它们都不在另一个的子树中，例如 3 和 9。

在此处输入图像描述

一般如何交换这样的 DOM 节点？

function swap(node1: Element, node2: Element) {
}
javascript

2 个回答

  1. Best Answer

    因为我们只需要交换位置，所以执行一个replaceChild返回要替换的节点并将该节点插入到第一个节点所在的位置就足够了。

    为了正确插入，您可以使用insertBefore. 要找到要插入的节点，您可以使用该属性.nextElementSibling

    在节点一个接一个的情况下，只insertBefore在这些节点上使用就足够了。

    例子：

    function swap(node1, node2) {
  var node1Next = node1.nextElementSibling;
  if (node1Next == node2) {
    node1.parentNode.insertBefore(node2, node1);
    return;
  }

  node1.parentNode.insertBefore(node2.parentNode.replaceChild(node1, node2), node1Next);
}
swap(document.querySelector('.wrap1'), document.querySelector('.wrap2'));
    <div class="wrap1">wrap1</div>
<div class="wrap2">wrap2</div>
<div class="">skip1</div>
<div class="">skip2</div>
<div class="">skip3</div>
<div class="wrap3">wrap3</div>
<div class="wrap4">wrap4</div>

    • 1

  2. 对称链路对解决方案：

    function swap(node1, node2) {
  const parent1 = node1.parentNode
  const parent2 = node2.parentNode
  const nextNode1 = node1.nextSibling
  const nextNode2 = node2.nextSibling

  parent1.insertBefore(node2, nextNode1)
  parent2.insertBefore(node1, nextNode2)
}

const node1 = document.querySelector('.wrap1');
const node2 = document.querySelector('.wrap2');
swap(node1, node2);
    <div class="wrap1">wrap1</div>
<div class="wrap2">wrap2</div>
<div class="">skip1</div>
<div class="">skip2</div>
<div class="">skip3</div>
<div class="wrap3">wrap3</div>
<div class="wrap4">wrap4</div>

    比Grundy 的解决方案稍差（不优化邻域情况）。

    • 0

相关问题