DOMノードのアイソレート

ScrapBook の DOMイレーサー という機能はページ中のクリックした箇所を削除する機能であるが、右クリックによってクリックした箇所以外を削除するという裏技的な機能も有する。この機能を DOMアイソレータ と呼んでいる。
これまでのバージョンでは DOMアイソレータ の仕様は、クリックした箇所のノードを body の直下(つまり body.firstChild の位置)へ insertBefore し、 body の firstChild 以外の全ての childNode を removeChild するという処理の流れになっている。わかりやすく言えば、クリックした箇所のノードを切り離してトップレベルに持ってきて、それ以外を削除するということである。

しかし、このような処理ではCSSとの整合性が悪くなり、ページの見た目が崩れやすい問題があった。そこで、ScrapBook 1.0.12 (Build ID 20060625) では、body ~ クリックした箇所のノードまでの道は残して、道から外れている不要なノードを削除するような処理へと改変した。以下はその部分の処理を抜粋した関数である。

function isolateNode(aNode)
{
    if ( !aNode || !aNode.ownerDocument.body ) return;
    while ( aNode != aNode.ownerDocument.body )
    {
        var parent = aNode.parentNode;
        var child = parent.lastChild;
        while ( child )
        {
            dump((child == aNode ? "o" : "x") + " " + parent.nodeName + " " + child.nodeName + "
");
            var prevChild = child.previousSibling;
            if ( child != aNode ) parent.removeChild(child);
            // 前のノードへ移動
            child = prevChild;
        }
        // 親ノードへ移動
        aNode = parent;
    }
}

TOP

TOP