Question

我们如何比较两个HTML元素是否相同？

我试过这件事，但没有运气

<div class="a"> Hi this is sachin tendulkar </div>
<div class="a"> Hi this is sachin tendulkar </div>

然后在按钮上单击，我调用函数检查（）

var divs = $(".a");
alert(divs.length);    // Shows 2 here which is correct
if (divs.get(0) == divs.get(1)) alert("Same");

但这不起作用。两个div中的一切都是一样的。除此之外，我们如何比较两个HTML元素是否完全一致。包括他们的innerHTML，className，Id及其属性。

这可行吗？

实际上，我有两个HTML文档，我想从它们中删除相同的内容所以两个元素可以具有相同的id。

PS：在Crowder的宝贵意见后更新。如果我们将两个元素作为字符串进行比较，我们就不会得到匹配，因为它们的属性顺序可能会有所不同所以唯一的选择是迭代每个子属性并匹配。我仍然需要弄清楚完全有效的实施策略。

Answer 1

您可以使用：

element1.isEqualNode(element2);

在您的具体示例中：

var divs = $(".a");
if ( divs.get(0).isEqualNode(divs.get(1)) ) alert("Same");

DOM Level 3 Core Spec包含所有细节。本质上，这两个节点具有匹配的属性，后代和后代的属性，返回true。

有一个类似的.isSameNode（）只有当两个元素都是同一个节点时才返回true。在您的示例中，这些节点不是相同的节点，但它们是相同的节点。

Answer 2

（请参阅下面的完整，大部分未经测试，当然未经重构的袖口解决方案。但首先，它的部分内容。）

比较他们的innerHTML非常简单：

if (divs[0].innerHTML === divs[1].innerHTML)
// or if you prefer using jQuery
if (divs.html() === $(divs[1]).html()) // The first one will just be the HTML from div 0

...虽然您必须根据自己的标准问自己这两个元素是否相同：

<div><span class="foo" data-x="bar">x</span></div>
<div><span data-x="bar" class="foo">x</span></div>

...因为他们的innerHTML将不同（至少在Chrome上，我怀疑大多数（如果不是所有浏览器））。（更多内容见下文。）

然后你需要比较他们的所有属性。据我所知，jQuery没有给你一个枚举属性的方法，但DOM确实：

function getAttributeNames(node) {
  var index, rv, attrs;

  rv = [];
  attrs = node.attributes;
  for (index = 0; index < attrs.length; ++index) {
    rv.push(attrs[index].nodeName);
  }
  rv.sort();
  return rv;
}

然后

var names = [getAttributeNames(div[0]), getAttributeNames(div[1])];
if (names[0].length === names[1].length) {
    // Same number, loop through and compare names and values
    ...
}

请注意，通过对上面的数组进行排序，我假设它们的属性顺序在“等效”的定义中并不重要。我希望是这样，因为它似乎没有被保留，因为我在运行this test时得到了不同浏览器的不同结果。既然如此，我们必须回到innerHTML问题，因为如果元素本身的属性顺序不重要，那么可能后代元素的属性顺序不应该很重要。如果那是的情况，你需要一个递归函数，根据你的等价定义检查后代，而不是使用innerHTML。

但是你应该能够从上面的部分中加入一些内容，根据你的标准比较两个元素。

更多探索：

这个问题让我感到很奇怪，所以我踢了一会儿，然后想出了以下内容。它几乎没有经过测试，可以使用一些重构等，但它应该可以让你在那里大部分时间。我再次假设属性的顺序并不重要。下面假设文本中的最细微差别显着。

function getAttributeNames(node) {
  var index, rv, attrs;

  rv = [];
  attrs = node.attributes;
  for (index = 0; index < attrs.length; ++index) {
    rv.push(attrs[index].nodeName);
  }
  rv.sort();
  return rv;
}

function equivElms(elm1, elm2) {
  var attrs1, attrs2, name, node1, node2;

  // Compare attributes without order sensitivity
  attrs1 = getAttributeNames(elm1);
  attrs2 = getAttributeNames(elm2);
  if (attrs1.join(",") !== attrs2.join(",")) {
    display("Found nodes with different sets of attributes; not equiv");
    return false;
  }

  // ...and values
  // unless you want to compare DOM0 event handlers
  // (onclick="...")
  for (index = 0; index < attrs1.length; ++index) {
    name = attrs1[index];
    if (elm1.getAttribute(name) !== elm2.getAttribute(name)) {
      display("Found nodes with mis-matched values for attribute '" + name + "'; not equiv");
      return false;
    }
  }

  // Walk the children
  for (node1 = elm1.firstChild, node2 = elm2.firstChild;
       node1 && node2;
       node1 = node1.nextSibling, node2 = node2.nextSibling) {
     if (node1.nodeType !== node2.nodeType) {
       display("Found nodes of different types; not equiv");
       return false;
     }
     if (node1.nodeType === 1) { // Element
       if (!equivElms(node1, node2)) {
         return false;
       }
     }
     else if (node1.nodeValue !== node2.nodeValue) {
       display("Found nodes with mis-matched nodeValues; not equiv");
       return false;
     }
  }
  if (node1 || node2) {
    // One of the elements had more nodes than the other
    display("Found more children of one element than the other; not equivalent");
    return false;
  }

  // Seem the same
  return true;
}

实例：

Answer 3

为什么不这么简单呢？

<div id="div1"><div class="a"> Hi this is sachin tendulkar </div></div>
<div id="div2"><div class="a"> Hi this is sachin tendulkar </div></div>

if($('#div1').html() == $('#div2').html())
    alert('div1 & div2 are the same');        
else
    alert('div1 & div2 are different');

http://jsfiddle.net/5Zwy8/1/

Answer 4

这是如何编码的？

var d1 = document.createElement("div");
d1.appendChild(divs.get(0));
var d2 = document.createElement("div");
d2.appendChild(divs.get(1));
if (d1.innerHTML == d2.innerHTML) ?

如何比较两个HTML元素

4 个答案: