Question

我是JavaScript的新手，我正在尝试创建一个递归函数来检查两个DOM节点是否相同。这个函数似乎对所有事情都是正确的，并且由于某种原因不能按照我想要的方式检查DOM。只有节点1和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));

Answer 1

使用document.createElement(*tagName*)

Here是一些文档。

例如，您需要创建两个元素，将它们传递给它们并查看它们是否相同。然后你可以将同一个基于两次。

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

Answer 2

你传递的是字符串，而不是DOM元素。您需要将HTML转换为DOM元素。

中描述了许多解决方案

Creating a new DOM element from an HTML string using built-in DOM methods or prototype

所以你可以这样做：

var html1 = '<div id="one">Some<span>node <em>contents</em> for</span>comparison</div>';
var html2 = '<div id="four">Some<span>node <em>contents</em> for</span>comparison</div>';
var html3 = '<div id="one">Some<span>node <b>contents</b> for</span>comparison</div>';

var div1 = document.createElement('div');
div1.innerHTML = html1;
var div2 = document.createElement('div');
div2.innerHTML = html2;
var div3 = document.createElement('div');
div3.innerHTML = html3;

alert(nodeEquivalence(div1.firstChild, div2.firstChild));
alert(nodeEquivalence(div1.firstChild, div3.firstChild));


function nodeEquivalence (node1, node2) {
  var passed = true;

  function test(node1, node2) {
    if ((node1.nodeType === node2.nodeType) && (node1.tagName === node2.tagName || node1.nodeValue === node2.nodeValue) && (node1.childNodes.length === node2.childNodes.length)) {
      passed = true;
    } else {
      passed = false;
    }
  }

  node1 = node1.firstChild;
  node2 = node2.firstChild;
  while (passed && node1 && node2) {
    test(node1, node2);
    node1 = node1.nextSibling;
    node2 = node2.nextSibling;

  }
  //test(document.body);
  return passed;
};

Answer 3

是的，您只需比较2个字符串，而不是比较2个html元素。您的node1，node2将始终未定义。

顺便说一下，下面有一些很好的例子来说明如何比较2个html元素。

How to compare two HTML elements

Answer 4

大多数相关部分是 innerHTML 。大部分信息都在那里。如果两个HTML节点的innerHTML相同，那么几乎所有内容都是相同的。比 tagName 和<input>标记类型属性：

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节点指定相同的类名时，您将完全相同。

Example

创建一个HTML元素：

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

将html节点传递给javascript函数

4 个答案: