我试图理解 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 时文本值比较时的情况发生了变化
“盒子1和盒子3“或者即使它是一个空节点，没有文本值比较时的情况是这样的“盒子1和盒子6”.
比较时也会返回 false“盒子3和盒子4”它具有相同的节点以及它的文本值只是它的写法不同。
但无论如何，它应该返回 true，因为它们都是p作为它的后代。
在 DOM 中，一切都是 Node。元素是节点（当然），但属性（历史上）、注释、文档、文档片段、文档类型和文本也是如此。
所有文本都包含在文本节点中。
让我们证明这一点。如果我们循环遍历childNodes的，比如说，#box4在上面的代码中：
for (let child of document.querySelector('#box4').childNodes) {
console.log(child.nodeType);
}
<div id="box4">
<p>
I am Xyz
</p>
</div>
这个日志3 then 1 then 3再次。如果我们查一下MDN https://developer.mozilla.org/en/docs/Web/API/Node/nodeType，我们了解到3 is the nodeType of a Text节点，同时1 is the nodeType of an Element node.
如果我们要循环遍历#box3，我们会得到不同的结果：
for (let child of document.querySelector('#box3').childNodes) {
console.log(child.nodeType);
}
<div id="box3"><p> I am Xyz
</p>
</div>
这个日志1 then 3（因为你有一个p元素节点后跟仅包含空格的文本节点）。
那么，简短的答案是“相同的子节点”包含文本内容。
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
