[JavaScript] ライブラリ「DOMコード」

2015年4月10日

Javascript プログラミング

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]

注意

プログラムに不具合などを見つけられた方は、コメントにて報告をお願いします。

このブログを検索

ごあいさつ

このWebサイトは、独自思考で我が道を行くユゲタの少し尖った思考のTechブログです。 毎日興味がどんどん切り替わるので、テーマはマルチになっています。 もしかしたらアイデアに困っている人の助けになるかもしれません。