cssセレクタや、xpathのような、エレメントの座標を表すユニークコードを検討してみました。
基本的にはHTMLのID属性があれば、それで十分ですが、全てのエレメントにIDがついている訳ではないので、要素の特定をする目的で作りました。
仕様
document.body以下のエレメントが対象
指定のエレメントを下から上に向かって階層を上っていき、以下のような書き方を文字列にする
body[0].table[0].tr[2].td[1].div[3]
逆にこの文字列をdecode関数で、指定のエレメントを取得できるようにしました。
ソース
(function(){
var $$={};
$$.encode = function(elm){
if(typeof(elm)=='undefined' || elm==null || !elm){return ""}
var dom = [];
do{
if(elm.id && elm == $d.getElementById(elm.id)){
dom[dom.length] = elm.id;
break;
}
else if(!elm.parentNode){break}
var num = 0;
var cnt = 0;
if(elm.parentNode.childNodes.length){
for(var i=0;i<elm.parentNode.childNodes.length;i++){
if(typeof(elm.parentNode.childNodes[i].tagName)=='undefined'){continue}
if(elm.parentNode.childNodes[i].tagName != elm.tagName){continue}
if(elm.parentNode.childNodes[i] == elm){
//table-cellの場合、colspan,rowspanを考慮しない絶対ポジションを取得する
num=cnt;
break;
}
cnt++;
}
}
//小文字英数字で形成する
dom[dom.length] = e.tagName.toLowerCase() + "["+num+"]";
if(e == $b){break}
}
while (e = e.parentNode);
//配列を逆にする
var dom2 = [];
for(var i=dom.length-1;i>=0;i--){
dom2[dom2.length] = dom[i];
}
return dom2.join(".");
};
$$.decode = function(uid){
if(!uid || typeof(uid)!='string'){return}
//単一IDの場合;
if(document.getElementById(uid)!=null){return document.getElementById(uid)}
//element抽出処理
var elm= document.getElementsByTagName("html")[0];
var d1 = id.split(".");
var flg=0;
var path = [];
for(var i=0;i<d1.length;i++){
if(d1[i].match(/^(.*?)\[(.*?)\]$/)){
var tag = RegExp.$1;
var num = RegExp.$2;
if(tag=='' || num==''){return}
var cnt = 0;
var flg2= 0;
var e2 = elm.childNodes;
for(var j=0;j<e2.length;j++){
if(!e2[j].tagName || typeof(e2[j])=='undefined'){continue}
if(e2[j].tagName != tag.toUpperCase()){continue}
if(cnt == num){
elm = e2[j];
flg2++;
break;
}
cnt++;
}
//存在しないelement処理
if(flg2==0){return}
flg++;
}
else if(document.getElementById(d1[i])!=null){
elm = document.getElementById(d1[i]);
flg++;
}
else if(document.getElementById(d1[i])==null){
return;
}
//table-cell用処理
path[path.length] = d1[i];
}
if(!flg){return}
return elm;
};
window.$$UNIQUE=$$;
return $$;
})();
使い方
# class="hoge"の2番目の要素のユニークIDを取得する
var uid = $$UNIQUE.encode(document.getElementsByClassName("hoge")[1]);
//-> div[0].table[0].tr[3].td[4].a[0]
# 上記リターン値からエレメントを取得する
var hoge = $$UNIQUE.decode("div[0].table[0].tr[3].td[4].a[0]");
//-> [object]
注意
プログラムに不具合などを見つけられた方は、コメントにて報告をお願いします。
