Javascript - 遍历元素的递归函数

问题描述

我刚刚开始阅读 JavaScript，我正在尝试编写一个小型递归函数，该函数将搜索给定节点并以字符串形式返回值列表.

I've just started reading up on JavaScript and I'm trying to write a small recursive function that would search through given nodes and return a list of values as a string.

我的 HTML 结构可能类似于

My HTML structure could be something like

<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 函数:

And Here is my Javascript function:

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] }

当我尝试打印子节点值时，我得到一堆未定义的返回.

When I try to print the childnodes values, I get a bunch of undefined returns.

如果有人能解释我做错了什么，我将不胜感激.

If anybody could explain what I'm doing wrong, I'd really appreciate it.

推荐答案

你需要做如下的事情(递归跨浏览器)

You will need to do something like the following (recursive cross-browser)

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+支持

Supported by 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

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

Without recursion and cross browser would be something like this

Javascript

避免使用标签

标签在 JavaScript 中不是很常用，因为它们使程序更难阅读和理解.尽量避免使用标签，根据情况，更喜欢调用函数或抛出错误.

Labels are not very commonly used in JavaScript since they make programs harder to read and understand. As much as possible, avoid using labels and, depending on the cases, prefer calling functions or throwing an error.

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

这篇关于Javascript - 遍历元素的递归函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持跟版网！