Javascript 如何比较两个HTML元素

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

我试过这个东西，但没有成功

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

但这是行不通的。在两个分区中，一切都是一样的。 除此之外，我们如何比较两个HTML元素是否完全相同。 包括它们的innerHTML、类名、Id和属性

这可行吗

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

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

更新 请参见和。这是有道理的，但它将

类

和

样式

属性作为文本进行比较，因此相同的类集或相同的样式属性集以不同的顺序将使它认为节点是不等价的。处理这个问题

原始答案 （下面是一个完整的、基本上未经测试的、当然也未经重构的即兴解决方案，但首先是它的一些细节。）

比较它们的

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

问题上来，因为如果元素本身上的属性顺序不重要，那么子元素上的属性顺序应该不重要。如果是这种情况，您将需要一个递归函数，该函数根据您的等效定义检查子体，而不使用

innerHTML

还有一个问题是：如果元素具有不同但等效的

style

属性怎么办？例如：

<div id="a" style="color: red; font-size: 28px">TEST A</div>
<div id="b" style="font-size: 28px; color: red">TEST B</div>

可悲的是，正如我在回答中所说：

请注意，至少在某些浏览器上，如果（其中一个具有

color:red

，另一个具有

color:#ff0000

），上述操作将失败，因为当样式属性使用字符串值时，通常是按照提供的方式获取值，而不是标准化。您可以使用

getComputedStyle

来获取计算的（ish）值，但是接下来我们将讨论CSS的适用性问题：具有完全相同标记的两个元素可能与

getComputedStyle

具有不同的值，因为它们在DOM中的位置以及作为结果应用于它们的CSS。而且

getComputedStyle

在文档中没有的节点上不起作用，因此不能仅克隆节点来解决该问题

但是，您应该能够根据您的标准将上面的内容组合在一起，以比较两个元素

更多信息可供探索：

---

这个问题让我奇怪地感兴趣，所以我想了一会儿，然后得出了以下结论。它大多未经测试，可能需要一些重构，等等，但它应该能让您实现大部分目标。我再次假设属性的顺序并不重要。下面假设文本中哪怕是最细微的差异都是显著的

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;
}

函数getAttributeName（节点）{ var指数、rv、attrs； rv=[]； attrs=node.attributes； 对于（索引=0；索引 实例：

---

为什么不用简单的方法

<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');

你好，我是sachin tendulkar
嗨，我是sachin tendulkar
如果（$（'div1'）.html（）==$（'div2'）.html（））
警报（'div1和div2相同'）；
其他的
警报（“第1部分和第2部分不同”）；

这是如何编码的

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) ?

您可以使用：

element1.isEqualNode(element2);

在您的具体示例中：

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

报告中有所有的细节。本质上，如果两个节点具有匹配的属性、子节点和子节点的属性，则返回true
有一个类似的.isSameNode（）仅当两个元素都是sam时才返回true

<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');

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) ?

element1.isEqualNode(element2);

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