JavaScript 到 "flatten"网页 DOM 保留视觉外观？

Question

我想编写 JavaScript 代码来“扁平化”任意网页的 DOM，同时保留视觉外观(但不一定是调整大小或其他动态行为)

从理论上讲，我认为这应该只是记录每个元素相对于窗口的位置(例如 PPK's findPos(element) )及其计算的 CSS 样式(例如 window.getComputedStyle(element).cssText )，从其父元素移动元素到“body”的直接子元素，使其绝对定位在先前记录的位置，并直接在元素上设置记录的 CSS 属性。

我已经用这种方法取得了一些成功，但它离完美还差得很远:

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

我正在尝试类似的东西，但我只扁平化 block 级节点，因为所有这些节点都将破坏布局(想想里面的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);
}

然后只需迭代它们(因为您会让它们按正确的相反顺序排列)并在应用定位时将它们移动到 body。

出于我的目的，我只是为他们重新创建简单的 div 框来研究布局，我发现我遇到了最初定位在其他元素中的 block 元素的问题，这些元素会剪辑它们(溢出隐藏) ，我目前正在寻找使用 svg 蒙版来重现剪辑的方法。