よくわからない

練習のために、 livedoor クリップ の 人気ページ を LDRize に対応させようと思って Greasemonkey で xfolk の span タグをつけたそうとしてみた、んだけど、以下のスクリプトをインストールして Firebug のコンソールで眺めていると明らかに変。

スクリーンショット画像の img タグの親ノードの a タグを、 で囲いたいので、 XPath でとってきて a タグを cloneNode() したものを xfolkentry な span に appendChild() して、そのあと古い a 以下のノードを removeChild() で消している。でも、これが forEach() のループが40回回ると、40回目のときに appendChild() で 1 から 40 までの a タグのノードが追加される。うまく説明できない・・・。

w.console.log(i, _xfolkentry.childNodes.length);

このデバッグ行で、 1 1, 2 1, 3 1, ... 40, 1 となるのを期待してるのに、 1 1, 2 2, 3 3, ... 40 40 みたくなる。後へいくほどだぶって追加されてしまう。なんでこんな風になってしまうんだろう？ cloneNode() がいけないのかと思ったけど、 cloneNode() で作られた _a をコンソールで表示してみても普通に一個のものに見えるんだけど・・・。

// ==UserScript==
// @name           LDRize for LDC
// @namespace      http://d.hatena.ne.jp/a666666/
// @include        http://clip.livedoor.com/hot/
// ==/UserScript==

function xpath(query) {
    var results = document.evaluate(query, document, null,
        XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE, null);
    var nodes = new Array();
    for(var i=0; i<results.snapshotLength; i++){
        nodes.push(results.snapshotItem(i));
    }
    return nodes;
}

(function(){
    var w = unsafeWindow;
    var d = w.document;
    w.console.log('foobar');

    var x = "/html/body/div[3]/div[2]/div[4]/div/div[*]/div/div/a";
    var nodes = xpath(x);

    var xfolkentry = d.createElement('span');
    xfolkentry.setAttribute('class', 'xfolkentry');

    nodes.forEach(function(a,i,array){
        var div = a.parentNode;
        w.console.log('before: ', div.innerHTML);
        var _xfolkentry = div.insertBefore(xfolkentry, a);
        var _a = a.cloneNode(false);
        w.console.log(i, _a);
        _xfolkentry.appendChild(_a);
        w.console.log(i, _xfolkentry.childNodes.length);
        div.removeChild(a);
        w.console.log('after: ', div.innerHTML);
    });

    w.console.log('foobar');
})();