Javascript – 迭代元素的递归函数

我刚刚开始阅读JavaScript，我正在尝试编写一个小的递归函数，它将搜索给定的节点并将值列表作为字符串返回。

我的HTML结构可能是这样的

parentfolder1 
item1
 
item2
 
parentfolder2 
item1
 
item2
 
  

这是我的Javascript函数：

 function jsoncreator(parentfolderclass){ var jstring = ''; //get first occurance of parent folder var parentfolder = document.getElementById(parentfolderclass); var childnodes = parentfolder.childNodes; for (property in childnodes){ jstring += property+ childnodes[property]; if(childnodes[property] === parentfolderclass){ jsoncreator(parentfolderclass); jstring += childnodes[property].value + '
'; } else{ //jstring += childnodes[i].value + '
'; } } document.write(jstring); } 

所有我回来的都是

 0[object Text]1[object HTMLDivElement]2[object Text]3[object HTMLDivElement]4[object Text]5[object HTMLDivElement]6[object Text]length7itemfunction item() { [native code] } 

当我尝试打印childnodes值时，我得到了一堆未定义的返回值。

如果有人能解释我做错了什么，我真的很感激。

Answer 1

您将需要执行以下操作（递归跨浏览器）

使用Javascript

 function walkTheDOM(node, func) { func(node); node = node.firstChild; while (node) { walkTheDOM(node, func); node = node.nextSibling; } } function textNodeValuesToArray(node) { if (typeof node === "string") { node = document.getElementById(node); } var arrayOfText = []; function pushText(currentNode) { if (currentNode.nodeType === 3) { arrayOfText.push(currentNode.nodeValue); } } walkTheDOM(node, pushText); return arrayOfText; } console.log(textNodeValuesToArray("parentfolder")); 

在jsfiddle

或者使用treewalker

浏览器兼容性

支持IE9 +，FF2 +，Chrome 1 +，Safari 3 +，Opera 9+

使用Javascript

 function textNodeValuesToArray(node) { if (typeof node === "string") { node = document.getElementById(node); } var arrayOfText = [], treeWalker = document.createTreeWalker(node, NodeFilter.SHOW_TEXT, { acceptNode: function (node) { return NodeFilter.FILTER_ACCEPT; } }, false); while (treeWalker.nextNode()) { arrayOfText.push(treeWalker.currentNode.nodeValue); } return arrayOfText; } console.log(textNodeValuesToArray("parentfolder")); 

在jsfiddle

没有递归和跨浏览器将是这样的

使用Javascript

避免使用标签

标签在JavaScript中并不常用，因为它们使程序更难以阅读和理解。 尽可能避免使用标签，并根据具体情况，更喜欢调用函数或抛出错误。

 function walkDOM(root, func) { var node = root; start: while (node) { func(node); if (node.firstChild) { node = node.firstChild; continue start; } while (node) { if (node === root) { break start; } if (node.nextSibling) { node = node.nextSibling; continue start; } node = node.parentNode; } } } function textNodeValuesToArray(node) { if (typeof node === "string") { node = document.getElementById(node); } var arrayOfText = []; function pushText(currentNode) { if (currentNode.nodeType === 3) { arrayOfText.push(currentNode.nodeValue); } } walkDOM(node, pushText); return arrayOfText; } console.log(textNodeValuesToArray("parentfolder")); 

在jsfiddle

Answer 2

 
parentfolder1 
item1
 
item2
 
parentfolder2 
item1
 
item2
 
 
 var children = document.getElementById('parentfolder').getElementsByClassName('*'); var childValues = new Array(); for(i=0; i