最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

jquery - Javascript - Recursive function to iterate through elements - Stack Overflow

programmeradmin3浏览0评论

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.

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>

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);
}

All im getting back is

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.

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.

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>

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);
}

All im getting back is

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.

Share Improve this question edited Aug 1, 2013 at 21:28 dudemanbearpig asked Aug 1, 2013 at 21:06 dudemanbearpigdudemanbearpig 1,3123 gold badges12 silver badges19 bronze badges 5
  • For a first, duplicated IDs are not valid HTML. Apart from that, you didn't actually describe what the returned array should contain exactly. – Fabrício Matté Commented Aug 1, 2013 at 21:07
  • @FabrícioMatté it would return a list of values as a string – dudemanbearpig Commented Aug 1, 2013 at 21:10
  • "Values" as in their text content? – Fabrício Matté Commented Aug 1, 2013 at 21:11
  • childnodes[property] === parentfolder does not make sense as a node cannot be a descendant of itself; var d = document.createElement('div'); d.appendChild(d); // Error: HierarchyRequestError: DOM Exception 3 – Paul S. Commented Aug 1, 2013 at 21:14
  • @PaulS. It was a typo. Its fixed now. Although, it doesnt make any changes.. – dudemanbearpig Commented Aug 1, 2013 at 21:20
Add a ment  | 

2 Answers 2

Reset to default 10

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"));

On jsfiddle

Or using treewalker

Browser patibility

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"));

On jsfiddle

Without recursion and cross browser would be something like this

Javascript

Avoid using labels

Labels are not very monly 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"));

On 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);
  }
}
发布评论

评论列表(0)

  1. 暂无评论