Javascript-用于迭代元素的递归函数
Javascript - Recursive function to iterate through elements
我刚刚开始阅读JavaScript,我正在尝试编写一个小型递归函数,该函数将搜索给定的节点并以字符串形式返回值列表。
我的HTML结构可能类似
<div id="parentfolder">parentfolder1
<div class ="item1">item1</div>
<div class ="item2">item2</div>
<div id="parentfolder">parentfolder2
<div class ="item1">item1</div>
<div class ="item2">item2</div>
</div>
</div>
这是我的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 + '<br>';
}
else{
//jstring += childnodes[i].value + '<br>';
}
}
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] }
当我尝试打印子节点值时,我会得到一堆未定义的返回。
如果有人能解释我做错了什么,我真的很感激
您需要执行以下操作(递归跨浏览器)
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 上
<div id="parentfolder">parentfolder1
<div class ="item1">item1</div>
<div class ="item2">item2</div>
<div class="subfolder">parentfolder2
<div class ="item1">item1</div>
<div class ="item2">item2</div>
</div>
</div>
var children = document.getElementById('parentfolder').getElementsByClassName('*');
var childValues = new Array();
for(i=0; i<children.length; i++) {
if(children[i].className == 'subfolder') {
continue;
} else {
childValues.push(children[i].innerHTML);
}
}
相关文章:
- 递归函数中断
- 将jQuery对象传递到setTimeout递归函数中
- 对象与递归函数的比较
- 循环内部的递归函数未按预期工作
- 递归函数返回不正确
- 递归函数编程困境
- 给定一个带有数字的数组,我如何编写一个递归函数,当 2 个元素加起来为一个目标时,它会在数组中查找索引
- 返回不会退出 javascript 中的递归函数
- jquery递归函数转换为非递归函数
- AngularJS,promise带有递归函数
- 如何停止此递归函数
- 如何将下面的递归函数转换为纯函数
- jQuery setTimeout ajax递归函数在即时消息程序中短时间后抛出错误
- Javascript递归函数引用了这一点
- 如何将这个递归函数转换为迭代函数
- jQuery递归函数调用和Javascript之间有区别吗;s setInterval
- 如何检查传递到递归函数的参数是否是数组的元素
- 使用递归函数删除所有重复的数组元素
- Javascript-用于迭代元素的递归函数
- 当对数组元素求和时,递归函数根据顺序返回不同的值