javascript - [代码解析] 关于交换两个DOM节点在文档中的位置

问题描述

问 题

交换两个DOM节点在文档中的位置,下面的代码中分了两种情况：
(1)a b是同级元素
(2)a嵌套b（或者b嵌套a）

html：

<div><span id="a1">a</span><span id="b1">b</span></div>
<div><span id="a2">a</span><span></span><span id="b2">b</span></div>
<div><span id="a3">a<span id="b3">b</span></span></div>

js:

function swapElements(a,b){
  if(a==b)return;
  //记录父元素
  var bp=b.parentNode,ap=a.parentNode;
  //记录下一个同级元素
  var an=a.nextElementSibling,bn=b.nextElementSibling;
  //如果参照物是邻近元素则直接调整位置
  if(an==b)return bp.insertBefore(b,a);
  if(bn==a)return ap.insertBefore(a,b);
  if(a.contains(b)) //如果a包含了b
    return ap.insertBefore(b,a),bp.insertBefore(a,bn);
  else
    return bp.insertBefore(a,b),ap.insertBefore(b,an);
};
swapElements(a1,b1);
swapElements(a2,b2);
swapElements(a3,b3);

问题是，

(1)为什么同级情况中
bp.insertBefore(b,a);要return 回去

(2)嵌套情况中,下列代码看不懂

return ap.insertBefore(b,a),bp.insertBefore(a,bn);

解决方案

1. return是为了结束本函数执行, 大部分是因个人习惯, 因为在if中写了return之后就不必去写else了, 运行时解释器也没必要去执行后面的代码了。调用的时候也并没有关系返回值。

2. return ap.insertBefore(b,a),bp.insertBefore(a,bn);可以理解为

   ap.insertBefore(b,a)
   return bp.insertBefore(a,bn)

   js压缩后大部分都是这种语法格式的代码,这种代码是为了节约空间文件大小的, 是给机器看的, 不是给人看的

总的来讲都是为了代码节约。

这篇关于javascript - [代码解析] 关于交换两个DOM节点在文档中的位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！