如何通过javascript从一组DOM中获取数据，然后整理成自己想要的数据

Question

目前已知一组DOM结构，想要从这组DOM中拿出相关的数据，并从新整合成一个自己想要的数据，而这个DOM的结构相对来说不是那么规范。
代码如下：

<p id="box">
    <ol>
        <li class="list">1111</li>
        <li class="list">2222</li>
        <li>
            <ol>
                <li class="list">2222-11</li>
                <li class="list">2222-22</li>
            </ol>
        </li>
        <li class="list">3333</li>
        <li class="list">4444</li>
        <li>
            <ol>
                <li class="list">4444-11</li>
                <li class="list">4444-22</li>
                <li>
                    <ol>
                        <li class="list">4444-22-11</li>
                        <li class="list">4444-22-22</li>
                        <li class="list">4444-22-33</li>
                    </ol>
                </li>
            </ol>
        </li>
        <li class="list">5555</li>
    </ol>
</p>

主体代码是一个有序列表ol，需要找到ol下所有的li上面的数据而ol下面的第一层li.list，指的是第一级目录，跟在li.list后面没有class的li，则是前面一个li.list的子集，子集可能包含二级，也可能包含三级，也可能就只有一级。

最终希望通过上面的DOM解析出来的数据如下：

/*
    现在dom结构是上面这样的，而且这个结构是我不能改变的
    然后现在我需要把上面dom里面的数据取出来，重组成下面这样的格式
    大致意思是这样的： box 下面的第一层ol里面的li.list是第一级的栏目，如果li.list后面跟着的li没有class，那么这个li就是前面li.list的子集，需要包到上一级child里

    text: 代表当前li的内容
    child: 代表当前li有没有子集，child是一个数组
*/

var arrlist = [
     {
         text: '1111',
         child: null
     },
     {
         text: '2222',
         child: [
             {
                 text: '2222-11',
                 child: null
             },
             {
                 text: '2222-22',
                 child: null
             }
         ]
     },
     {
         text: '3333',
         child: null
     },
     {
         text: '4444',
         child: [
             {
                 text: '4444-11',
                 child: null
             },
             {
                 text: '4444-22',
                 child: [
                     {
                         text: '4444-22-11',
                         child: null
                     },
                     {
                         text: '4444-22-22',
                         child: null
                     },
                     {
                         text: '4444-22-33',
                         child: null
                     }
                 ]
             }
         ]
     },
     {
         text: '5555',
         child: null
     }
];

主要是自己才疏学浅，实在是没有什么思路了，所以才来这求助广大网友，希望各位不吝赐教。我并不想做伸手党，只是真的无奈了，没有半点思路，希望大家能够谅解，能够帮助一下我，谢谢！

Answer 1

泻药，我看了一下，为了快一点就用jquery来写了，大概思路从代码可以看出。

$(function(){
        //顶级的box下的ol
        var boxOl = $('#box>ol');

        console.log(getChildren(boxOl));
        //主要方法
        function getChildren(father){
                //存储对象数组
                var artList = [];
                var listItem;
                //首先得到直接子元素
                var li = father.children('li');
                //遍历，当拥有list的时候，就生成一个{text:''.children:null}的对象
                li.each(function(i){
                        listItem = {};
                     var that = $(this);
                        if(that.hasClass('list')){
                                listItem['text'] = that.text();
                                listItem['child'] = null;
                        }else{//没有list，说明是嵌套层
                //因为前一个list就是它的父层，所以我们加入过数组的就要把它赶出来，组装一个正确的
                                artList.pop();
                                listItem['text'] = that.prev('.list').text();
                                //递归获取该层下的子元素的child
                                listItem['child'] = getChildren(that.children('ol'));
                        }
                        //推入结果数组中
                        artList.push(listItem);
                });
                //返回
                return artList;
        }
});

demo:>> http://runjs.cn/detail/1iovvaxa

Answer 2

这个用for-in循环来做吧，思路是将li全部获取到，然后遍历它们，对child进行判断，如果为空，则进入下一个li，如果还有内容，则递归上面的方法。
代码如下：

function analyse( list ) {  //传入一个li的数组
    var res = [];
    for ( var i in list ) {
        var data = {};  //这是每一个li对应的对象
        data.text = i.innerText;
        if ( i.document.getElementsByTagName("ol") ) {  //这里也可以用i.children来进行判断是否还有子节点，但对于题主的页面结构，就直接判断是否有ol吧
            data.child = analyse( i.getELementsByTagName("ol")[0].getElementsByTagName("li");  //这里用原生写出来比较长，其实就是在解析到当前li下还有子节点后，又获取这个li下的所有li
        } else {
            data.child = null;
            res.push[data]; 
        }
    }
    return res; //最后将数组返回
}

以上方法即满足题主需求。