Javascript-用于迭代元素的递归函数

Javascript - Recursive function to iterate through elements

本文关键字：递归函数元素迭代用于 Javascript- 更新时间：2023-09-26

我刚刚开始阅读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);
  }
}