如何遍历 DOM 树？答案

【问题标题】：How to iterate through a DOM tree?如何遍历 DOM 树？
【发布时间】：2011-04-19 09:27:13
【问题描述】：

我正在开发一个使用以下方式制作的树结构的网站：创建一个列表，如果此列表的元素本身是一个列表，则使用 appendChild 将其附加到第一个列表。大列表放在一个名为“树”的 div 中。我想访问 div 'tree' 的内容并通过节点显示它们。

我尝试了几种方式对其进行编码，但它不起作用，有人知道怎么做吗？

编辑（我的代码太长）

【问题讨论】：

对你的意思感到困惑......
你能贴出相关的代码吗？

标签： javascript html dom tree

【解决方案1】：

此函数遍历 DOM 树。您也可以向它传递一个回调，该回调也采用父元素和子元素：

_SU3.treeIterate = function(parent, callback) {
   var children = _SU3.getChildren(parent);
   for (var i = 0; i < children.length; i++) {
      var child = children[i];
      callback(parent, child);
      _SU3.treeIterate(child, callback);
   }    
};

_SU3.getChildren = function(parent) {

  var children = new Array();

  var childNodes = parent.childNodes;
  if (childNodes == null) 
    return children;

  for (var i = 0; i < childNodes.length; i++) {
     var child = childNodes[i];
     if (child.tagName == "li" || child.tagName == "LI") {
        children.push(child);
     }
  }
  return children;
};

注意：在此示例中，getChildren() 函数仅查找“li”项。根据需要进行修改。

【讨论】：

【解决方案2】：

如果你认为你需要树上的其他几个函数，我建议你看看jsTree

【讨论】：