function showDOM(node) {
for(var i=0; i < node.children.length; i++){
var n = node.children[i],
nParent = n.parentNode,
el = document.createElement("div"),
dom = document.getElementById("dom");
if(n.id != "dom" && n.tagName != "SCRIPT"){
el.innerText = n.tagName + " " + i;
if(nParent.tagName == "BODY"){
dom.appendChild(el);
} else {
// Тут хочу работать с вложенными элементами дочерних элементов BODY
}
showDOM(node.children[i]);
}
}
}
showDOM(document.body);<body>
<div class="level1">
<div class="level2">
<p class="level3"></p>
</div>
</div>
<ul class="level1">
<li class="level2">
<p class="level3"></p>
</li>
</ul>
<div id="dom">
</div>
</body>
$(document).ready(function() {
"use strict";
var recursionCount = 0,
elements = [],
dom = document.getElementById("dom");
function showDOM(node) {
for(var i=0; i < node.children.length; i++){
var n = node.children[i],
el = document.createElement("div"),
elClass = n.className,
parentNode = n.parentNode,
parent;
if(n.id != "dom" && n.tagName != "SCRIPT"){
n.setAttribute("id", recursionCount);
el.setAttribute("data-element-id", recursionCount);
recursionCount++;
if(n.parentNode.tagName == "BODY"){
parent = "dom";
} else {
parent = parentNode.getAttribute("id");
}
el.setAttribute("data-parent-id", (parent));
el.innerText = "<" + n.tagName + " class='" + elClass + "'> recursionCount = " + recursionCount;
console.log(el);
elements.push(el);
}
showDOM(node.children[i]);
}
return elements;
}
showDOM(document.body);
for(var a in elements){
var pasteIn = elements[a].getAttribute("data-parent-id"),
all = document.getElementsByTagName("*");
for(var b = 0; b < all.length; b++){
if(all[b].getAttribute("data-element-id") == pasteIn){
all[b].appendChild(elements[a]);
}
}
}
});