使用 Javascript 反向 DOM 节点顺序

Reverse DOM node order with Javascript

本文关键字：节点 顺序 DOM 反向 Javascript 使用      更新时间：2023-09-26

我很好奇是否有一种简单的方法可以用JavaScript进行这种转换。

<div>
  <i>
    <b>
      TEXT
    </b>
  </i>
</div>

对此：

<div>
  <b>
    <i>
      TEXT
    </i>
  </b>
</div>

现在我知道这可以通过更长的方式实现，例如创建一个新的<b>和<i>，将所有旧<b>放在新<i>内，然后将新<i>放在新<b>内，然后替换子项，或类似的方法。但我很好奇是否有类似node.swapTypeWithParent或swapNodeTypes(b, i)的东西.

不，没有。 假设"更长的方式"是指用javascript移动和替换元素和文本，那么这就是这样做的方法，javascript中没有其他快捷方式。

您可以通过几个循环轻松做到这一点

function reverseNest(bottom_level, top_level) {
    var arr = [],
        e = bottom_level,
        f;
    while ((e = e.parentNode) && e !== top_level) {
        arr.push(e);
    }
    arr.push(bottom_level);
    e = top_level || document.documentElement;
    while (arr.length) {
        f = arr.shift();
        e.appendChild(f); // may want to use .insertBefore
        e = f;
    }
}

在这里，bottom_level将是您的 #text 节点，top_level将是您的<div>

快速演示（使用控制台检查以查看反转的标记）

这是我

基于jQuery的解决方案。我认为没有比这更短的了！

$('div>*>*').contents().unwrap();

$('div>*').wrap('<b></b>');

我知道您的示例只是此功能的演示，但我仍然发现我们将<i>元素与<b>元素交换是微不足道的，因为结果在语义和风格上将是相同的:)

相关文章：