Javascript - Hàm đệ qui để lặp qua các phần tử

Question

Tôi vừa mới bắt đầu đọc trên JavaScript và tôi đang cố gắng viết một hàm đệ quy nhỏ để tìm kiếm qua các nút đã cho và trả về một danh sách các giá trị dưới dạng một chuỗi.

cấu trúc HTML của tôi có thể là một cái gì đó giống như

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

Và đây là chức năng Javascript của tôi:

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

Tất cả im nhận lại là

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

Khi tôi cố gắng in giá trị childnodes, tôi nhận được một loạt các trả về không xác định.

Nếu ai đó có thể giải thích những gì tôi đang làm sai, tôi thực sự đánh giá cao điều đó.

Answer 1

Bạn sẽ cần phải làm một cái gì đó như sau (recursive qua trình duyệt)

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

Hoặc sử dụng treewalker

Browser compatibility

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

Nếu không đệ quy và trình duyệt chéo sẽ là một cái gì đó như thế này

Javascript

Avoid using labels

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

On jsfiddle

Answer 2

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