javascript - 我可以创建一个由 CSS 引擎监听的抽象文档吗？

Question

是否可以创建我的文档树的抽象副本，该副本也由 CSS 引擎监听？

“被 CSS 引擎监听”是什么意思？简单地说，当我向这个抽象文档的元素添加 id、类或属性时，CSS 选择器必须像在真实 DOM 中一样更改元素的属性值，并且我必须能够通过使用getComputedStyle 方法

例如。 [CSS]

a {
    color: red;
}

.bar {
    color: blue;
}

例如。 [DOM]

<a href="#">Lorem</html>

例如。 [JavaScript]

var copiedDocument = document.copy();
var abstractLink = copiedDocument.getElementsByTagName('a')[0];

/* RETURN => red */
getComputedStyle(abstractLink).getPropertyValue("color");

abstractLink.setAttribute("class", "bar");

/* MUST RETURN => blue */
getComputedStyle(abstractLink).getPropertyValue("color");

Answer 1

在 Firefox 上，你可以直接使用

var copiedDocument = document.cloneNode(true);

但是，在 Chrome 上，getComputedStyle 仅适用于当前文档树中的元素。

所以你可以使用类似的东西

var iframe = document.createElement('iframe');
iframe.style.display = 'none';
document.body.appendChild(iframe);

var doc = iframe.contentDocument;
doc.replaceChild(document.documentElement.cloneNode(true), doc.documentElement);

var abstractLink = doc.getElementsByTagName('a')[0];
getComputedStyle(abstractLink).getPropertyValue("color"); // "rgb(255, 0, 0)"
abstractLink.className = "bar";
getComputedStyle(abstractLink).getPropertyValue("color"); // "rgb(0, 0, 255)"

document.body.removeChild(iframe);