javascript - 检查父节点是否相等，而不 pipe 节点

Question

我正在寻找一种快速的方法来检查 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>

所以我想知道，判断这两个元素是否相等的最佳性能方式是什么？

我知道我们可以对两个节点进行浅克隆并比较克隆，或者我们可以删除所有子节点，比较父节点，然后重新附加子节点，但我想知道是否有更快的方法。

Answer 1

您将不得不对节点进行浅拷贝以便比较它们，如下所示:

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 毫秒。