Как перебрать дерево DOM?

Question

Я работаю на веб-сайте, который использует древовидную структуру, созданную следующим образом: список создается, и если элемент этого списка сам является списком, то он добавляется в первый список с помощью appendChild.Большой список помещается в div с именем tree.Я хотел бы получить доступ к содержимому div 'tree' и пройти по узлам, чтобы отобразить их.

Я пытался закодировать его несколькими способами, но это не работает, кто-то знает, каксделать это?

Редактировать (мой код был слишком длинным)

Answer 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".Исправьте по необходимости.

Answer 2

Если вы считаете, что вам нужно несколько других функций в дереве, я предлагаю вам посмотреть jsTree