最近お気にいりの再帰
function TreeWalker(root){ this.root = root; this.walk = function(func){ (function(node){ if(node.nodeType != 1){return} func.apply(node); var ch = node.childNodes; var len = ch.length; (function(i,fn){ if(len <= i){return} fn(ch[i]); arguments.callee(i+1,fn); })(0,arguments.callee) })(root) return r; } }
使い方は簡単。まずTreeWalkerにルートノードを引数にして
インスタンス作成。インスタンスメソッドwalkの引数に
各ノード(thisで参照できる)に出あったら実行する関数を渡す。
以下は、bodyタグ以下に存在する tdエレメントの枠線を1px緑色で表示しなおす関数。
var walker = new TreeWalker(document.body); walker.walk(function(){ if(this.tagName.toLowerCase() == 'td'){ this.style.border = '1px solid green'; } })
もひとつ例。
配列を用意して、td要素が見つかると配列に追加していく使いかた。
var r = []; walker.walk((function(arr){ return function(){ if(this.tagName.toLowerCase() == 'td'){ arr.push(this); } } })(r))