将html节点传递给javascript函数

我是JavaScript新手，正在尝试创建一个递归函数来检查两个DOM节点是否相等。这个函数似乎对所有内容都返回true，并且由于某种原因没有按我希望的方式检查DOM。只有节点1和4是等效的

var htmlStrings = ['<div id="one">Some<span>node <em>contents</em> for</span>comparison</div>', '<div id="two">Some<span>node contents for</span>comparison</div>', '<div id="one">Some<span>node <strong>contents</strong> for</span>comparison</div>', '<div id="four">Some<span>node <em>contents</em> for</span>comparison</div>'];

var div1 = document.createElement('div');
div1.innerHTML = htmlStrings[0];
document.body.appendChild(div1);

var div2 = document.createElement('div');
div2.innerHTML = htmlStrings[1];
document.body.appendChild(div2);

var div3 = document.createElement('div');
div3.innerHTML = htmlStrings[2];
document.body.appendChild(div3);

var div4 = document.createElement('div');
div4.innerHTML = htmlStrings[3];
document.body.appendChild(div4);


function nodeEquivalence(node1, node2) {
    var passed = false;


        if (node1.nodeType === node2.nodeType) {
            if ((node1.tagName === node2.tagName && node1.nodeValue === node2.nodeValue)) {
               passed = true;
            } 
        }

        node1 = node1.firstChild;
        node2 = node2.firstChild;
        while (node1 && node2) {
           nodeEquivalence(node1, node2);
            node1 = node1.nextSibling;
            node2 = node2.nextSibling;

        }

        return passed;

}


console.log(nodeEquivalence(div1, div2));
console.log(nodeEquivalence(div1, div4));

var htmlStrings=['Somenode contents for comparison'，'Somenode contents for comparison'，'Somenodecontentsforcomparison'，'Somenode contents for comparison']；
var div1=document.createElement（'div'）；
div1.innerHTML=htmlStrings[0]；
文件.正文.附件（第1部分）；
var div2=document.createElement（'div'）；
div2.innerHTML=htmlStrings[1]；
文件.正文.附件（第2部分）；
var div3=document.createElement（'div'）；
div3.innerHTML=htmlStrings[2]；
文件.正文.附件（第3部分）；
var div4=document.createElement（'div'）；
div4.innerHTML=htmlStrings[3]；
文件.正文.附件（第4部分）；
功能节点等效性（节点1、节点2）{
var通过=错误；
if（node1.nodeType===node2.nodeType）{
if（（node1.tagName==node2.tagName&&node1.nodeValue==node2.nodeValue））{
通过=正确；
} 
}
node1=node1.firstChild；
node2=node2.firstChild；
while（节点1和节点2）{
节点等效性（节点1、节点2）；
node1=node1.nextSibling；
node2=node2.nextSibling；
}
返回通过；
}
log（节点等效性（div1，div2））；
日志（节点等效性（div1，div4））；

使用

document.createElement（*标记名*）

这是一些文档

例如，您需要创建两个元素，将它们都传入，然后查看它们是否等效。然后，你可以在两次相同的基础上

var newDiv = document.createElement("div");
var newSpan = document.createElement("span");

---

您正在传递字符串，而不是DOM元素。您需要将HTML转换为DOM元素。在中介绍了许多解决方案

因此，您可以：

var html1='Somenode contents for comparison'；
var html2='Somenode contents for comparison'；
var html3='Somenode contents for comparison'；
var div1=document.createElement（'div'）；
div1.innerHTML=html1；
var div2=document.createElement（'div'）；
div2.innerHTML=html2；
var div3=document.createElement（'div'）；
div3.innerHTML=html3；
警报（节点等效性（div1.firstChild，div2.firstChild））；
警报（节点等效性（div1.firstChild，div3.firstChild））；
功能节点等效性（节点1、节点2）{
var通过=真；
功能测试（节点1、节点2）{
如果（（node1.nodeType==node2.nodeType）&&（node1.tagName==node2.tagName | | node1.nodeValue==node2.nodeValue）&&（node1.childNodes.length==node2.childNodes.length））{
通过=正确；
}否则{
通过=错误；
}
}
node1=node1.firstChild；
node2=node2.firstChild；
while（通过节点1和节点2）{
测试（节点1、节点2）；
node1=node1.nextSibling；
node2=node2.nextSibling；
}
//试验（文件正文）；
返回通过；
};是的，不是比较两个html元素，而是比较两个字符串。而你的节点1，节点2总是未定义的

顺便说一下，下面有一些关于如何比较两个html元素的好例子

大部分相关部分是innerHTML。大部分信息都在那里。如果两个HTML节点的innerHTML相同，则几乎所有内容都相同。而标记名和
标记的类型属性：

function nodeEquivalence(node1, node2) {
    var equal = false;
    if (node1.innerHTML === node2.innerHTML) {
        if (node1.tagName === node2.tagName) {
            if (node1.type === node2.type) {
                equal = true;
            }
        }
    }
    return equal;
}

我认为，这个函数几乎可以处理所有情况

请注意，如果您通过id或类名访问节点，则有一点不同：

var el = document.getElementById(id);
el.innerHTML

var el2 = document.getElementsByClassName(className);
el[0].innerHTML;

此外，您还可以通过outerHTML进行比较。当您为每个HTML节点指定相同的类名时，您将得到完全相同的东西


创建HTML元素：

var div = document.createElement("div");
var text = document.createTextNode("some text");
div.appendChild(text);
document.body.appendChild(div);

请把问题的标题弄清楚一点。谢谢很抱歉，我在测试后对代码重新排序，没有注意到您使用了函数赋值而不是函数声明。我已经修好了，谢谢。因此，这段代码修复了未定义的问题，但是当我在chrome开发工具中尝试它时，它返回的所有结果都是真的。只有div1和div4相等。更新了上面的代码。当两个节点的子节点数相同时，您将设置
passed=true
。如果子函数不匹配，则从不将其设置为
false
。函数不是递归函数。它只是在给定节点的子节点上调用
test（）
，它永远不会深入测试它们的子节点。嗯，但是每次子节点设置为它们的第一个子节点（while循环上方的子节点）时，它都会向下测试它们的子节点。无论如何，我认为我偏离了主题，我将为最新一期开始一个新问题：）谢谢！你的节点等效函数太复杂了。看，我是怎么做到的。InnerHTML通常用于设置标记中的文本。但这不是正确的方法。InnerHTML就是名字所说的“HTML中的内容”（整个HTML树）。要设置文本，请使用textContent或createTextNode。消息“undefined”出现，因为您没有将其附加到文档中。我会更新我的答案来澄清它！document.body.appendChild（el）缺失。函数正确！div1中的innerHTML具有与div4不同的id。现在创建一个文本节点，并在该节点中放置HTML。这不是我的意思。CreateTextNode用于创建纯文本！