Web 技术研究所

我一直坚信着,Web 将会成为未来应用程序的主流

交换两个元素在文档中的位置

  目前浏览器所支持的DOM操作接口并没有提供直接对DOM树中的两个元素做位置交换的方法。我们只是逐个操作元素,一个元素被移动后就失去了它原来的位置,所以要实现元素在文档中的位置交换不仅要记录元素的位置信息,还要将邻近的元素作为参照物来使用。
  用什么元素来作为元素位置的参照物呢?通常只要知道一个元素的下一个同级元素就可以确定自己的位置了,但下一个同级元素可能不存在,所以还需要记录其父元素。而且参照物必须是在这个交换过程中位置固定不变的,所以不能是交换的另一个元素。如果这个交换的两个元素是嵌套关系或邻近的兄弟关系就需要做特殊处理。
  对于嵌套关系的两个元素,正常的交换动作是逻辑上不可行的,因为一个元素无法被放入自己的内部。对于这种情况如何处理需要视具体的应用场合来定。我的代码中对这种情况是只把内部的元素放到外部元素的前面,而外部元素保持不变。
<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>
<script>
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);
</script>
网名:
54.144.24.*
电子邮箱:
仅用于接收通知
提交 悄悄的告诉你,Ctrl+Enter 可以提交哦
神奇海螺
[查看全部主题]
各类Web技术问题讨论区
发起新主题
本模块采用即时聊天邮件通知的模式
让钛合金F5成为历史吧!
次碳酸钴的技术博客,文章原创,转载请保留原文链接 ^_^