Member 11987268 Ответов: 1

Древовидная структура для HTML DOM

Я хочу сделать древовидную структуру, заполненную Html-деревом dom. Я пишу рекурсивную функцию, но во время загрузки страницы страница становится не реагирующей.

вот мой код

var root=document.documentElement;
                var troot=document.getElementById("list");
                traverse(root, troot);
                function insertAfter(newNode, referenceNode)
                {
                    referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
                }
                function traverse(parent, tparent)
                {
                    var sib=document.createElement("li");
                    sib.appendChild(document.createTextNode(parent.nodeName));
                    tparent.appendChild(sib);
                    var nextSib, nextRoot;
                    nextSib=document.createElement("li");
                    nextRoot=document.createElement("ul");
                    nextSib.appendChild(nextRoot);
                    insertAfter(nextSib, sib);
                    var childs=parent.children;
                    
                    for(var i=0; i<childs.length; i++)
                    {
                        traverse(childs[i], nextRoot);
                    }
                }


Что я уже пробовал:

Я пробовал это с помощью jquery и не работал. Я запутался, поддерживает ли javascript рекурсию или нет...

1 Ответов

Рейтинг:
11

Richard Deeming

Ты изменять DOM-дерево как ты, работающих в ней. Каждый раз, когда вы звоните traverse, вы добавляете новый <li> элемент в список, который дает вам еще один элемент для обхода, что означает, что вы вызываете traverse опять же, что добавляет еще один новый <li> элемент, ...

Не изменяйте документ, пока не закончите его просмотр. Самым простым вариантом, вероятно, является создание отсоединенного <ul> элемент, выступающий в качестве родителя, и добавить его к <div> когда вы закончите:

var root = document.documentElement;
var troot = document.createElement("ul");

traverse(root, troot);

document.getElementById("listContainer").appendChild(troot);

Member 11987268

Плз дайте полный код. Я новичок в javascript.
или я могу использовать цикл for вместо рекурсии?

Richard Deeming

Что вы подразумеваете под"полным кодом"? Он вызывает точно такую же функцию, которую вы опубликовали в своем вопросе!

Member 11987268

Но его повесить браузер

Richard Deeming

Ты хоть читал мой ответ?!

Ваш код зависает в браузере, потому что вы изменяете DOM одновременно с его обходом.

Измените способ вызова своей функции, как я описал в своем ответе, чтобы вы не меняли DOM, пока не закончите его обход.

Member 11987268

О! спасибо!

Member 11987268

много-много раз благодарю вас, сэр. Он отлично работает...