How do you transform the html code into an invested body?

[jules]

There's a mark:

var elems = $( "div" );
var result = $.makeArray( elems );
console.log(result);
// массив result должен принять такой вид
var example = [
    {name: "p1", child: [
        {name: "p1.1", child: []},
        {name: "p1.2", child: [
         {name: "p1.2.1", child: []},
            {name: "p1.2.2", child: []}
        ]}
    ]}
];

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>p1
  <div>p1.1</div>
  <div>p1.2
    <div>p1.2.1</div>
    <div>p1.2.2</div>
  </div>
</div>

How do you write a function that transforms the marking into a mass, given the input of the tags? The final marking contains almost 2,7000 for the different inputs div

[Mystic]

var elem = document.querySelector("div"),
  example = [foo(elem)];
function foo(elem) {

return {

name: elem.firstChild.textContent.trim(),

child: [].map.call(elem.children, foo)

}

}

console.log(example)

<div>p1

<div>p1.1</div>

<div>p1.2

<div>p1.2.1</div>

<div>p1.2.2</div>

</div>

</div>