Question

如果DOM的顺序不同，但每种类型的元素数量相同，那么它们是否相等？

像这样：

First DOM Element ="<div>
                     <img/>
                     <span/>
                     <div>
                       <img/>
                     </div>
                    </div>";

Second DOM Element = "<div>
                       <img/>
                       <img/>
                       <span>
                         <div/>
                       </span>
                      </div>";

在这个实际的样本中，当我有相同数量的元素类型时，元素的顺序是否重要，DOM是否仍然相等？

由于

Answer 1

来自specification：

节点＆＃39; A＆＃39;等于节点＆＃39; B＆＃39;如果满足以下所有条件：

[为简洁起见删除了其他条件]

•A＆＃39; A＆＃39;等于＆＃39; B＆＃39;在相同的指数。

因此，如果子元素的顺序不同，则认为它们不相等。

Answer 2

当比较具有子元素的元素节点时，.isEqualNode()递归地应用于相应索引处的子节点对，并且每个子节点必须等于另一个子节点。

因此，DOM子树结构看起来必须完全相同。也就是说，A.childNodes[0]的值必须相等（在.isEqualNode()的规则下）与B.childNodes[0]的值相等，依此类推。

请注意，.isEqualNode()还有其他规则：属性必须相同且值相同，显然节点类型必须相同，等等。

Answer 3

不，它们不相等，因为firstElement是：

1 div

| _ 1 img

| _ 1 span

| _ 1 div

...等。

第二个包含：

1 div

| _ 2 img＆lt; ---这里已经不同了

...等...

函数isEqualNode返回true时，它们具有相同的类型，定义特征（对于元素，这将是它们的ID，子项数等等），它的属性匹配，等等上。

请参阅以下摘录：

let divList  = document.getElementsByTagName("div");

function test(p1, p2) {
  console.log("div " + p1 + " equals div " + p2 + ": " + divList[p1].isEqualNode(divList[p2]));
}

test(0, 0);
test(0, 1);
test(0, 2);

<div>This is the first element.</div>
<div>This is the second element.</div>
<div>This is the first element.</div>

我希望很清楚，再见。

两个html DOMS何时相同？

3 个答案: