JavaScript递归节点等价函数不起作用
JavaScript Recursive Node Equivalence Function Not Working
我在Chrome开发工具中测试以下代码,即使两个节点不相等,它也会返回true。示例节点如下所示。只有Div1 &div是相等的。我很有信心,我递归地触摸所有节点,但我认为我没有正确地设置变量与'if',或者也许我需要一个其他地方-我有点失落,并尝试了一堆东西。
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));
这是一个似乎适合您的测试用例的实现。它使用递归来测试子树。它专门用于处理元素、文档、文档片段、文本节点和注释节点。可以添加对其他类型节点的支持。
function nodeEquivalence(node1, node2) {
var ch1, ch2, nType;
// OK to have both node1 and node2 not exist, but only if both are missing
if (!node1 || !node2) {
return node1 === node2;
}
// must be same nodeType
ntype = node1.nodeType;
if (ntype !== node2.nodeType) {
return false;
}
// if there is a tagName, must be same tagName
if (node1.tagName && node1.tagName !== node2.tagName) {
return false;
}
switch(ntype) {
// nodes that have children
case 1: // element node
case 9: // document node
case 11: // document fragment node
// check equivalence on each corresponding child
ch1 = node1.firstChild;
ch2 = node2.firstChild;
while (ch1 && ch2) {
if (!nodeEquivalence(ch1, ch2)) {
return false;
}
ch1 = ch1.nextSibling;
ch2 = ch2.nextSibling;
}
return nodeEquivalence(ch1, ch2);
// nodes whose content is nodeValue
case 3: // text node
case 8: // comment node
return node1.nodeValue === node2.nodeValue;
// other types of nodes
default:
throw new Error("unsupported type of node");
break;
}
}
和,一个工作演示:http://jsfiddle.net/jfriend00/nruL6fdy/
你的代码逻辑有很多问题:
- 您试图在递归调用中使用单个局部变量。这行不通。
- 你没有在失败发生时立即停止比较。
- 即使tagName不存在,您的
if (node1.tagName === node2.tagName)
逻辑也会通过,因此您永远不会比较nodeValue
。 - 你的while循环将错过一个节点的子节点数多于另一个节点的情况。
相关文章:
- Ember Data DS.Model's set函数不起作用
- 为什么我的JavaScript堆栈排序函数不起作用
- Javascript onchange()函数不起作用
- 另一个Ajax函数触发的Ajax函数不起作用
- 从PHP调用JS函数不起作用
- jQuery validate函数不起作用
- JS-窗口宽度函数不起作用
- javascript函数,该函数不起作用,但不会显示任何错误
- 为什么这个排序函数不起作用
- 为什么这个反向函数不起作用
- Javascript parseInt 函数不起作用
- 我的函数不起作用,Ajax调用,JQuery,调用外部?我不知道
- 主干构造函数不起作用
- Javascript:this.value 函数不起作用
- Mocha 的 beforeEach() 和 done() 函数不起作用
- 在jQuery中,我的函数不起作用
- jquery-ui-rails的draggable和dropable函数不起作用
- 数学函数不起作用
- Javascript-创建打印到HTML的函数不起作用
- 我上传了客户's服务器一个js函数不起作用