Question

我试图理解JavaScript中的isEqualNode（）方法，显然根据W3学校提供的定义是这样的

isEqualNode（）方法检查两个节点是否相等。

如果满足以下所有条件，则两个节点相等：

它们具有相同的节点类型

它们具有相同的nodeName，NodeValue，localName，nameSpaceURI和   前缀

它们具有与所有后代相同的childNodes

它们具有相同的属性和属性值（属性   没有相同的顺序）

现在这里有一些代码变体，我试图按照定义

满足以下条件

function main(x,y)
{
  
/* 
To check whether node are equal are not using isEqualNode()
*/

var item1 = document.getElementById(x).firstElementChild;
var item2 = document.getElementById(y).firstElementChild; 
var result = item1.isEqualNode(item2); 
 document.getElementById("output").innerHTML = result;
}

<body>
  <div id="box1"><p>I am abc</p>
  </div>
  <div id="box2"><p>I am abc</p>
  </div>
  <div id="box3"><p> I am Xyz
   </p>
  </div>
  <div id="box4">
    <p>
      I am Xyz
      </p>
  </div>
  <div id="box5">
    <p>
      
    </p>
  </div>
  <div id="box6">
    <p>
      
    </p>
   </div>
  <p id="output">
    
  </p>
  <button onclick="main('box1','box2')">Compare Box1 and Box2</button>
  <button onclick="main('box1','box3')">Compare Box1 and Box 3</button>
  <button onclick="main('box2','box3')">Compare Box2 and Box3</button>
  <button onclick="main('box3','box4')">Compare Box3 and Box4</button>
  <button onclick="main('box5','box6')">Compare Box5 and Box6</button>
  <button onclick="main('box1','box6')">Compare Box1 and Box6</button>
</body>

现在，如果您观察到以下不同情况的O / P，那么您将得到的O / P列表：

比较Box1和Box2 = true

比较Box1和Box3 = false

比较Box2和Box3 = false

比较Box3和Box4 = false

比较Box5和Box6 = true

比较Box1和Box6 = false

现在，根据定义，它满足以下条件

它们具有相同的节点类型

它们具有与所有后代相同的childNodes

那么为什么当文本值被更改时返回false，这是比较时的情况在 的情Box1和Box6“ 。

它还会返回false，用于比较 “Box3和Box4” ，它具有相同的节点以及文本值，只有它以不同的方式写入时尚。

但无论如何，它应该返回true，因为它们都是 p 作为其子孙。

Answer 1

specification说

如果满足以下所有条件，则节点A等于节点B： A和B的nodeType属性值相同。 ... A的每个孩子都等于同一指数B的孩子。

所以，这是一个深刻的比较，每个孩子都需要相同，包括文本节点。

Answer 2

在DOM中，一切都是节点。元素是节点（当然），但属性（历史），评论，文档，文档片段，文档类型以及文本也是如此。

所有文本都包含在文本节点中。

让我们来证明这一点。如果我们在上面的代码中循环显示childNodes，#box4：

＆＃13;

for (let child of document.querySelector('#box4').childNodes) {
  console.log(child.nodeType);
}

＆＃13;

<div id="box4">
  <p>
    I am Xyz
  </p>
</div>

＆＃13;

这会再次记录3，然后再记录1，然后记录3。如果我们在MDN上查看，我们了解到3是nodeType节点的Text，而1是nodeType的{{1}}一个Element节点。

如果我们要遍历#box3，我们会得到不同的结果：

＆＃13;

for (let child of document.querySelector('#box3').childNodes) {
  console.log(child.nodeType);
}

＆＃13;

<div id="box3"><p> I am Xyz
  </p>
</div>

＆＃13;

这会记录1然后3（因为您已经有一个p元素节点，后跟一个只包含空格的文本节点。）

简短的回答是，＃34;同一个孩子的节点＆＃34;包括文字内容。

如何理解JavaScript

2 个答案: