sac*_*024 23 html javascript jquery
我们如何比较两个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的宝贵意见后更新.如果我们将两个元素作为字符串进行比较,我们就不会得到匹配,因为它们的属性顺序可能会有所不同所以唯一的选择是迭代每个子属性并匹配.我仍然需要弄清楚完全有效的实施策略.
Kee*_*een 44
您可以使用:
element1.isEqualNode(element2);
在您的具体示例中:
var divs = $(".a");
if ( divs.get(0).isEqualNode(divs.get(1)) ) alert("Same");
在DOM 3级核心规范了所有的细节.从本质上讲,这两个节点具有匹配的属性,后代和后代的属性.
有一个类似的.isSameNode()只有当两个元素都是同一个节点时才返回true.在您的示例中,这些节点不是相同的节点,但它们是相同的节点.
T.J*_*der 28
(请参阅下面的完整,大部分未经测试,当然未经重构的袖口解决方案.但首先,它的部分内容.)
比较他们isEqualNode很容易:
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>
...因为它们class会有所不同(至少在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
...
}
请注意,通过对上面的数组进行排序,我假设它们的属性顺序在"等效"的定义中并不重要.我希望是这样的,因为它似乎没有保留,因为我在运行此测试时得到了不同浏览器的不同结果.既然如此,我们必须回到这个style问题,因为如果元素本身的属性顺序不重要,那么可能后代元素的属性顺序不应该很重要.如果是这种情况,您将需要一个递归函数,根据您的等效定义检查后代,而不是根本使用innerHTML.
但是你应该能够从上面的部分中加入一些东西,根据你的标准比较两个元素.
更多探索:
这个问题奇怪地让我感兴趣,所以我踢了一会儿,然后想出了以下内容.它几乎没有经过测试,可以使用一些重构等,但它应该可以让你在那里大部分时间.我再次假设属性的顺序并不重要.以下假设即使文本中的最细微差别也很重要.
<div id="a" style="color: red; font-size: 28px">TEST A</div>
<div id="b" style="font-size: 28px; color: red">TEST B</div>
实例: