我最近在试验这个 HTML 比较，这有点工作：
/**
* Compare 2 dom nodes
* Given A node, identifier, B node, identifier, depth.
*/
function compare(A,Aid,B,Bid,godeep) {
if (A.nodeName != B.nodeName) {
addlog(Aid+' is <'+A.nodeName+'>, '+Bid+' is <'+B.nodeName+'>.');
}
for (let a=0; a<A.attributes.length; a++) {
let key = A.attributes[a].name,
other = B.attributes[key];
if (other !== undefined) {//both have attr.
if (A.attributes[a].value != other.value) {
addlog(Aid+' has attr '+key+'='+A.attributes[key].value);
addlog(Bid+' has attr '+key+'='+B.attributes[key].value);
}
} else {
addlog(Aid+' has attr '+key+'='+A.attributes[key].value+', not in other el.')
}
}
//Also check for the other's unique attr:
for (let b=0; b<B.attributes.length; b++) {
let key = B.attributes[b].name,
other = A.attributes[key];
if (other === undefined) {
addlog(Bid+' has attr '+key+'='+A.attributes[key].value+', not in other el.')
}
}
//TODO: Why does this not work correctly for styles? height and other attributes are not the same
// when comparing the same element to itself.
var cssA = A.ownerDocument.defaultView.getComputedStyle(A,null),
cssB = B.ownerDocument.defaultView.getComputedStyle(B,null);
console.log(cssA);
console.log(cssB);
for (let i=0; i<cssA.length; i++) {
if (cssA.getPropertyValue(cssA[i]) != cssB.getPropertyValue(cssB[i])) {
addlog(Aid+' css '+cssA[i]+'='+cssA.getPropertyValue(cssA[i]));
addlog(Bid+' css '+cssB[i]+'='+cssB.getPropertyValue(cssB[i]));
}
}
if (A.children.length != B.children.length) {
addlog(Aid+' has '+A.children.length+' children, '+Bid+' has '+B.children.length);
}
if (godeep > 0) {
for (let i=0; i<A.children.length; i++) {
if (i< B.children.length) { //compare it
compare(A.children[i], Aid+'.children['+i+']',
B.children[i], Bid+'.children['+i+']')
}
}
}
}
（这里的完整来源）奇怪的是，当将同一个节点与自身进行比较时，它说它自己的属性是不同的：
A css border-bottom-color=rgb(0, 0, 0)
B css border-bottom-color=rgb(51, 51, 51)
A css border-left-color=rgb(0, 0, 0)
B css border-left-color=rgb(51, 51, 51)
A css border-right-color=rgb(0, 0, 0)
B css border-right-color=rgb(51, 51, 51)
A css border-top-color=rgb(0, 0, 0)
B css border-top-color=rgb(51, 51, 51)
A css color=rgb(0, 0, 0)
B css color=rgb(51, 51, 51)
A css font-family=serif
B css font-family=Helvetica,arial,freesans,clean,sans-serif
A css font-size=16px
B css font-size=14px
A css font-weight=400
B css font-weight=700
A css height=auto
B css height=19.6px
A css line-height=19px
B css line-height=19.6px
A css list-style-type=disc
B css list-style-type=none
A css margin-bottom=16px
B css margin-bottom=1px
A css margin-top=16px
B css margin-top=1px
A css perspective-origin=50% 50%
B css perspective-origin=429px 9.8px
A css transform-origin=50% 50%
B css transform-origin=429px 9.8px
A css width=auto
B css width=858px
A css -moz-column-gap=16px
B css -moz-column-gap=14px
A css -moz-column-rule-color=rgb(0, 0, 0)
B css -moz-column-rule-color=rgb(51, 51, 51)
A css -moz-text-decoration-color=rgb(0, 0, 0)
B css -moz-text-decoration-color=rgb(51, 51, 51)
什么可能导致这种冲突？有没有办法在没有这种奇怪行为的情况下使用 getComputedStyle ？
更新
在这里，您可以看到这在浏览器中有效，但在 Chrome 特权代码中无效，您可以试试这个 devtools-tweaks 分支。