Javascript：エレメントの位置をコロコロと変える。

DOM element をスワップさせたり、最前部や最後部に移動させたりする関数群です。ま、簡単に出来ますし、大したコードでもないのですが、微妙に面白いｗ

・ 一つずつ上に移動
・ 一つずつ下に移動
・ 指定要素の最前部に移動
・ 指定要素の最後部に移動
・ 要素の入れ替え

のそれぞれの関数があります。

■ 確認環境
ie 6.0, 7.0
ff 1.5
ns 7.1
op 8.53
メイン環境じゃ無いので少ない・・・。

 ソースコード

function zbDom(){};
// 一つずつ上に移動
zbDom.stepUp = function (e){
  e = $(e);
  var p = e.parentNode;
  var b = e.previousSibling;
  if(!b || e == b || e == p.firstChild) return;
  p.removeChild(e);
  p.insertBefore(e, b);
}
// 一つずつ下に移動
zbDom.stepDown = function (e){
  e = $(e);
  var p = e.parentNode;
  var b = e.nextSibling;
  if(!b || e == b || e == p.lastChild) return;
  var c = b.nextSibling;
  if(!c || b == c || b == p.lastChild){
    p.removeChild(e);
    p.appendChild(e);
  }else{
    p.removeChild(e);
    p.insertBefore(e, c);
  }
}
// 指定要素の最前部に移動
zbDom.moveFirst = function (e, p){
  e = $(e);
  p = p ? $(p) : e.parentNode;
  var top = p.childNodes[0];
  if(top == e) return;
  e.parentNode.removeChild(e);
  p.insertBefore(e, top);
}
// 指定要素の最後部に移動
zbDom.moveLast = function (e, p){
  e = $(e);
  p = p ? $(p) : e.parentNode;
  e.parentNode.removeChild(e);
  p.appendChild(e);
}
// 要素の入れ替え
zbDom.swap = function (a, b){
  a = $(a);
  b = $(b);
  var pa = a.parentNode;
  var pb = b.parentNode;
  var c = document.createElement('span');
  pa.replaceChild(c, a);
  pb.replaceChild(a, b);
  pa.replaceChild(b, c);
}

 使い方

※ prototype.js の $ 関数を使っています。
※ prototype.js 入れ込みが面倒な方は以下のコードを追加すると動きます。

function $(id){
  if(typeof(id) == 'string') return document.getElementById(id);
  return id;
}
$(id) の id に element の id を入れると、getElementById で取得してくれます。string 以外を渡すと、そのまま返しますので、id は element かその id を入れて使います。
それ以外は対処してませんので悪しからず^^

■ 一つずつ上に移動
zbDom.stepUp(element);
element が HTMLドキュメントを１つずつ上に上っていきます。
但し親要素の範囲を超えません。

■ 一つずつ下に移動
zbDom.stepDown(element);
element が HTMLドキュメントを１つずつ下にくだっていきます。
但し親要素の範囲を超えません。

■ 指定要素の最前部に移動
zbDom.moveFirst(element, p^*);
element が指定要素(p)の最前部に移動します。
p は省略可能で、省略された場合は現在の親要素になります。

■ 指定要素の最後部に移動
zbDom.moveLast(element, p^*);
element が指定要素(p)の最後部に移動します。
p は省略可能で、省略された場合は現在の親要素になります。

■ 要素の入れ替え
zbDom.moveLast(elementA, elementB);
elementA と elementB を入れ替えます。

※ zbDom という関数のプロパティにワザワザ入れてるのは、これを継承するクラスを作成する予定だからｗ

 サンプル

サンプルはこちら

※ Ａの文字を持つ span 要素が移動します。
※ Ａを body の最後に移した場合、１つずつ上にあげようとすると、ブラウザによって要素の数が異なります。