我正在寻找一种快速的方法来检查 2 个元素是否彼此相等,而不管它们有什么 child 。 isEqualNode 不起作用,因为它还比较元素的子元素。
所以,在这个例子中,我想创建一个函数,如果给定 2 <div class="foo" style="background-color: green;">
元素作为参数,将返回 true,即使它们有不同的子元素。
<div class="foo" style="background-color: green;">
<h3>bar</h3>
Hello
</div>
<div class="foo" style="background-color: green;">
<div class="goat" />
</div>
<script>
function checkIfParentNodesAreEqual(el1, el2) { /* magic */}
var els = document.getElementsByClassName('foo');
checkIfParentNodesAreEqual(els[0], els[1]) // I want this to return true
</script>
所以我想知道,判断这两个元素是否相等的最佳性能方式是什么?
我知道我们可以对两个节点进行浅克隆并比较克隆,或者我们可以删除所有子节点,比较父节点,然后重新附加子节点,但我想知道是否有更快的方法。
最佳答案
您将不得不对节点进行浅拷贝以便比较它们,如下所示:
function compareNodes (nodes, shallow) {
if (shallow) nodes = nodes.map((node) => node.cloneNode(false))
return nodes.every((node, index, nodes) => {
let nextIndex = index + 1
return nodes[nextIndex] ? node.isEqualNode(nodes[nextIndex]) : true
})
}
compareNodes(Array.from(document.getElementsByClassName('foo')), true)
但正如您所说,您正在寻找一种可能更高效的替代方案。我不认为上面的实现非常低效,但你必须自己专门针对你的应用程序进行测试,看看它是如何执行的。我能想到的一种替代方法是使用虚拟 DOM 并利用其差异算法,但它们也有其缺点 - 如 this blog post over at Auth0 中所述。 .您将不得不对此进行一些挖掘,以找出您想要使用的实现。虽然我相信您会顺利完成上述实现。
更新:我对上述实现做了一些测试,比较了总共 1,000 个节点,包括对每个节点进行浅拷贝,在我的系统上平均花费了 3 毫秒。
关于javascript - 检查父节点是否相等,而不 pipe 节点,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46658476/