JavaScript to “smooth” a DOM webpage that preserves appearance?

Question

I would like to write JavaScript code that "aligns" the DOM of an arbitrary web page while maintaining a visual appearance (but not necessarily resizing or other dynamic behavior).

In theory, I believe that this is just a matter of recording the position of each element relative to the window (ex PPKfindPos(element) ) as well as the computed CSS (ex window.getComputedStyle(element).cssText) styles , moving the element from it parent to the direct child element of the "body", which makes it absolutely positioned in the previously recorded position and sets the recorded CSS attributes directly to the element.

I have had some success with this approach, but it is not close to perfection:

function walkDOM(element, parent, nodes) {
    parent = parent || { top : 0, left : 0, depth : 0 };
    nodes = nodes || [];

    if (element.nodeType === 1) {
        var node = findPos(element);
        node.element = element;
        node.width = element.scrollWidth;
        node.height = element.scrollHeight;
        node.depth = parent.depth + 1;
        node.cssText = window.getComputedStyle(element).cssText;
        nodes.push(node);

        for (var i = 0; i < element.childNodes.length; i++) {
            walkDOM(element.childNodes[i], node, nodes);
        }
    }
    return nodes;
}

// based on http://www.quirksmode.org/js/findpos.html
function findPos(element) {
    var position = { left : 0, top : 0 };
    if (element.offsetParent) {
        do {
            position.left += element.offsetLeft;
            position.top += element.offsetTop;
        } while (element = element.offsetParent);
    }
    return position;
}

var nodes = walkDOM(document.body);

nodes.forEach(function(node) {
    var e = node.element;

    if (e !== document.body)
        e.parentNode.removeChild(e);

    // e.setAttribute("style", node.cssText);
    e.style.position = "absolute";
    e.style.top = node.top + "px";
    e.style.left = node.left + "px";
    e.style.width = node.width + "px";
    e.style.height = node.height + "px";
    e.style.zIndex = node.depth + 1;

    if (e !== document.body)
        document.body.appendChild(e);
});

Answer 1

- , , ( em p ..). :

var treeWalker = document.createTreeWalker(
    document.body,
    NodeFilter.SHOW_ELEMENT,
    function (node) { 
        if (window.getComputedStyle(node, null).getPropertyValue("display") == "block") {
            return NodeFilter.FILTER_ACCEPT;
        }
        return NodeFilter.FILTER_REJECT; 
    },
    false
);

var nodeList = new Array();
while(treeWalker.nextNode()) {
    nodeList.push(treeWalker.currentNode);
}

( ) , .

div , , , , ( ), svg- .

Answer 2

, . jQuery ? , , offset(), .

http://api.jquery.com/category/manipulation/style-properties/
http://api.jquery.com/offset/
http://api.jquery.com/position/
http://jqueryui.com/demos/position/

, .