Javascript распечатать / визуализировать все элементы DOM как дерево узлов, сохраняя свою структуру

Question

потратив часы на поиск правильного ответа, я решил задать вопрос здесь.

Я хотел бы визуализировать / распечатать всю объектную модель документа (DOM) документа HTML без «выравнивания» его структуры.

Я нашел много решений для обхода DOM, но ни одно из нихиз них сохраняет структуру.

Пример показан на рисунке

Кто-нибудь знает, как получить результат в Javascript?

Answer 1

Вы можете попытаться с помощью DOM перейти к вашему HTML-документу, сначала взяв весь html-документ в переменную с помощью:

var myDoc = document.documentElement;
vary body = myDoc.firstChild.nextElementSibling; //returns body

Предположим, <h3> является первым потомком тела, а затем:

body.firstChild; 
body.firstChild.firstChild; //Text Node

Теперь перейдем к <P>

body.firstChild.nextSibling; //would return <p> 

Далее вы легко перейдете к его потомку, как упомянуто выше.

Надеюсь, это может помочь!