・ 一つずつ上に移動
・ 一つずつ下に移動
・ 指定要素の最前部に移動
・ 指定要素の最後部に移動
・ 要素の入れ替え
のそれぞれの関数があります。
■ 確認環境
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);
}
// 一つずつ上に移動
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ドキュメントを1つずつ上に上っていきます。
但し親要素の範囲を超えません。
■ 一つずつ下に移動
zbDom.stepDown(element);
element が HTMLドキュメントを1つずつ下にくだっていきます。
但し親要素の範囲を超えません。
■ 指定要素の最前部に移動
zbDom.moveFirst(element, p*);
element が指定要素(p)の最前部に移動します。
p は省略可能で、省略された場合は現在の親要素になります。
■ 指定要素の最後部に移動
zbDom.moveLast(element, p*);
element が指定要素(p)の最後部に移動します。
p は省略可能で、省略された場合は現在の親要素になります。
■ 要素の入れ替え
zbDom.moveLast(elementA, elementB);
elementA と elementB を入れ替えます。
※ zbDom という関数のプロパティにワザワザ入れてるのは、これを継承するクラスを作成する予定だからw
サンプル
サンプルはこちら
※ Aの文字を持つ span 要素が移動します。
※ Aを body の最後に移した場合、1つずつ上にあげようとすると、ブラウザによって要素の数が異なります。
この記事へのコメント