如何比较两个HTML元素?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (21)

如何比较两个HTML元素,无论它们是否相同?

我试过了

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

然后按一下按钮,我就调用一个函数check()

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

但这行不通。两分钟内一切都是一样的。除此之外,如何比较两个HTML元素是否完全无效。包括它们的innerHTML、className、ID和它们的属性。

这可行吗?

提问于
用户回答回答于

比较它们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
    ...
}

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

用户回答回答于

可以使用:

element1.isEqualNode(element2);

在具体示例中:

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

扫码关注云+社区