Javascript - 遍历元素的递归函数

Posted 2023-02-22

【中文标题】Javascript - 遍历元素的递归函数

【英文标题】：Javascript - Recursive function to iterate through elements

【发布时间】：2013-08-02 23:53:18

【问题描述】：

我刚刚开始阅读 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] 

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

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

【问题讨论】：

首先，重复的 ID 不是有效的 HTML。除此之外，您实际上并没有准确描述返回的数组应包含的内容。

@FabrícioMatté 它会以字符串形式返回值列表

文本内容中的“值”？

childnodes[property] === parentfolder 没有意义，因为节点不能是其自身的后代； var d = document.createElement('div'); d.appendChild(d); // Error: HierarchyRequestError: DOM Exception 3

@PaulS。这是一个错字。它现在固定了。虽然，它没有做任何改变..

【参考方案1】：

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

【讨论】：

您可能是指getElementsByTagName('*') 中的标记而不是类，而childValues[] = ... 不是有效的JS 语法。

childValues[] = ... 不是有效的 JS 语法。是的 - 停留在 php 模式。固定的。不 - 我的意思是 getElementsByClassName('*')

当然是。我一直在我的本地机器上使用它来实现几个功能。不幸的是，没有什么可以展示的。

【参考方案2】：

您需要执行以下操作（递归跨浏览器）

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