我们如何比较两个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");
但是这是行不通的。在两个div中所有的东西都是一样的。除此之外,我们如何比较两个HTML元素是否完全相同呢?包括它们的innerHTML,className,Id和它们的属性。
这可行吗?
实际上,我有两个HTML文档,我想从它们中删除相同的内容,这样两个元素就可以有相同的id。
PS:在Crowder的宝贵意见之后更新。如果我们比较两个元素作为字符串,我们不会得到匹配,因为它们的属性顺序可能会变化。所以唯一的选择是迭代通过每个子属性和匹配。我仍然必须找出完全工作的实现策略。
4条答案
按热度按时间mw3dktmi1#
您可以用途:
在您的具体示例中:
DOMLevel3核心规范包含所有的细节。本质上,如果两个节点具有匹配的属性、后代和后代的属性,则返回true。
有一个类似的.isSameNode(),只有当两个元素是相同的节点时才返回true,在你的例子中,它们不是相同的节点,但它们是相等的节点。
li9yvcax2#
更新
参见Keen's answer和ccproj's answer to a closely-related question,这里有
isEqualNode
,但是它将class
和style
属性作为文本进行比较,所以相同的类集合或相同的样式属性集合在不同的顺序下会使它认为节点是不等价的。ccprog's answer处理这个问题。原始答案
比较它们的
innerHTML
很容易:......尽管您必须自问,根据您的标准,这两个元素是否等价:
......因为他们的
innerHTML
将是 * 不同的 *(至少在Chrome上是这样,我怀疑在大多数浏览器上是这样)。然后需要比较它们的所有属性。据我所知,jQuery没有给予枚举属性的方法,但DOM提供了:
然后
请注意,通过对上面的数组进行排序,我假设它们的属性顺序在“等价”的定义中并不重要。我希望是这样,因为它似乎没有被保留,因为当我运行this test时,从不同的浏览器得到不同的结果。既然如此,我们必须回到
innerHTML
问题上。因为如果元素本身的属性顺序并不重要,那么后代元素的属性顺序也应该不重要,如果是这种情况,那么就需要一个递归函数,根据等价元素的定义来检查后代元素,且根本不使用innerHTML
。然后是this subsequent question提出的问题:如果元素具有不同但等效的
style
属性,该怎么办?例如:My answer there通过遍历元素的
style
对象的内容来处理它,如下所示:可悲的是,正如我在回答中所说:
请注意,如果出现 (其中一个为
color: red
,另一个为color: #ff0000
),上述操作将失败,至少在某些浏览器上是这样,因为当样式属性使用字符串值时,通常您会获得提供的值,而不是标准化的值。您可以使用getComputedStyle
来获得计算的(ish)值,但这样我们就会遇到CSS适用性方面的问题:标记完全相同的两个元素可能具有不同于getComputedStyle
的值,这是因为它们在DOM中的位置以及作为结果应用于它们的CSS。并且getComputedStyle
不能在不在文档中的节点上工作,所以您不能仅仅克隆节点来解决这个问题。但是你应该能够把上面的东西放在一起,根据你的标准来比较两个元素。
更多探索:
这个问题让我很感兴趣,所以我在这个问题上花了一段时间,得出了以下结论。它大部分未经测试,可能需要一些重构等,但它应该会让你走上大部分的路。我再次假设属性的顺序并不重要。以下假设即使是文本中最轻微的差异 * 都 * 重要。
示例:
nimxete23#
为什么不简单一点呢?
http://jsfiddle.net/5Zwy8/1/
v440hwme4#
这是怎么编码的?