将html节点传递给javascript函数

Question

我是JavaScript新手，试图创建一个递归函数来检查两个DOM节点是否等效。这个函数似乎对所有东西都返回true，并且不按照我想要的方式检查DOM。只有节点是等效的。

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

您正在传递字符串，而不是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 2

使用document.createElement(*tagName*)

Here是一些文档。

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

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

Answer 3

肯定的，而不是比较2个HTML元素，你简单地比较两个字符串。而你的node1，node2将永远是未定义的。顺便说一下，下面这个关于如何比较2个html元素的例子有一些不错的例子。

How to compare two HTML elements

Answer 4

最相关的部分是innerHTML的。大部分信息都在那里。如果两个HTML节点的innerHTML相同，则几乎所有内容都是相同的。比标签名和<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);