Question

如果我有两个要素：

元素A：

<div id="myID">
  <div id="a"></div>
  <div id="b"><div id="ba"></div></div>
  <div id="c"><span id="ca"></span></div>
</div>

和元素B：

<div id="myID">
  <div id="a"></div>
  <div id="b"><div id="ba"></div></div>
  <div id="c"><span id="ca"></span></div>
  <div id="d"></div>
</div>

是否有可能发现Element B的孩子多于Element A，然后找到附加元素的位置并在Element A中创建？

PS：在实际代码中，新元素加载了Ajax Request，但我不想用加载的内容替换所有内容，我只需要添加新内容并跳过现有内容。

PSS：在我目前的代码中，我有Md5校验和来检查新内容是否与现有内容不同，但如果新内容只有很少的更改，它会替换所有内容，这对我来说就是问题。

我当前代码的一部分：

 window.processResponse = function(data) {
    // Note : "data" is Ajax responseText;
    if(!data) return false;
    var $data = document.createElement("div");
    $data.innerHTML = data;
    var em = $data.getElementsByTagName("*");
    for(var i = 0; i < em.length; i++)
    {
      var parent = sget(em[i].id); // sget function is : document.getElementById
      if(parent) 
      {
        var html = em[i].innerHTML.replace(/(\s)+/gim, "").replace(/(\n|\r\n)+/gim, "");
        var id = em[i].id;
        savedPages[id] = savedPages[id] || [];
        var _md5 = md5(html);
        if(savedPages[id][0] == _md5) continue;
        savedPages[id] = [_md5, getTime()];
        parent.innerHTML = em[i].innerHTML;
      }
      if(em[i].tagName === "SCRIPT") 
      {
        var code = em[i].innerHTML.replace(/(\s)+/gim, "").replace(/(\n|\r\n)+/gim, "");
        var id = em[i].id;
        savedPages[id] = savedPages[id] || [];
        var _md5 = md5(code);
        if(savedPages[id][0] == _md5) continue;
        savedPages[id] = [_md5, getTime()];
        try{eval(em[i].innerHTML)}catch(ex){log(ex)};
      }
    }
  };

Answer 1

因此，您可以对其进行优化，但这也取决于您运行此代码的浏览器。我假设如下：

所有ID都是唯一的，您依赖于此。您想基本比较具有相同ID但结构不相同的元素。
正如你所说，所有孩子都有ID，你想只比较孩子 - 而不是嵌套节点
从服务器收到的元素只有额外的子元素。要删除子项，您必须添加一些其他代码。
因此，如果你有相同数量的孩子，我们假设他们是相同的（优化）。如果不是这样，那么你必须实现删除子项

说，我相信这种东西更适合服务器端，应该只向客户端发送实际修改过的部分。这就是我们通常所做的事情 - 或者，如果我们不在乎，就会取代所有事情。

  var div = document.createElement('div');
  div.innerHTML = s;

  var root = div.firstChild;
  var children = root.children;

  var documentRoot = document.getElementById(root.id);

  if (documentRoot && documentRoot.children.length < children.length) {
    var node = null;
    var previousNode = null;
    var index = 0;

    while ( node = children[index++] ) {
      var documentNode = document.getElementById(node.id);

      if (!documentNode) {
        if (previousNode)
          documentRoot.insertBefore(node, previousNode.nextSibling);
        else
          documentRoot.insertBefore(node, documentRoot.firstChild);

        documentNode = node;
      }

      previousNode = documentNode;

    }

    previousNode = null;

  } else {
    // probably append as is somewhere

  }

Answer 2

解决方案并非如此简单。如果父样式myID在样本A中不存在但子节点在两个样本中指示DOM中需要进行比较和调整的3个层，该怎么办？你怎么比较这个：

<div id="papa">
    <div id="myID">
        <div id="a"></div>
        <div id="b">
            <div id="ba"></div>
        </div>
        <div id="c">
            <span id="ca"></span>
        </div>
    </div>
</div>

VS

<div id="papa">
    <div id="a"></div>
    <div id="b">
        <div id="ba"></div>
    </div>
    <div id="c">
        <span id="ca"></span>
    </div>
</div>

在这种情况下，比较变得更加复杂。实际上，您需要一个具有合并功能的完全充实的XML / HTML语言识别diff实用程序。您可以使用Pretty Diff来演示它可以获得多么复杂，但遗憾的是它没有合并功能，因此它不能成为您问题的完全自动化解决方案。

找到两个dom元素的差异然后使它们相同

2 个答案: