萌新,循环多级判断

Question

基础很差的萌新，想实现一个文章目录树

想知晓有没有更简便的方法去实现

function ceshi(){
var h=0;
var h1=0;
var h2=0;
var h3=0;
var tree = document.getElementsByTagName("ARTICLE")[0].childNodes;
    for(i = 0;i<tree.length;i++){
        console.log(tree[i].tagName);
        if(tree[i].tagName=="H2"||h==1||h2==1){
            console.log("h2");
            h=1;
            h2=1;
            if(tree[i].tagName=="H2"){h2=0}
            if(tree[i].tagName=="H3"||h1==1||h3==1){
                console.log("-h3");
                h1=1;
                h3=1;
                if(tree[i].tagName=="H2"){h3=0}
                if(tree[i].tagName=="H4"){
                    console.log("--h4");
                    h=0;
                    h1=0;
                }
            }
        }else if(tree[i].tagName=="H3"||h==2||h2==2){
            console.log("h3");
            h=2;
            h2=2;
            if(tree[i].tagName=="H3"){h2=0}
            if(tree[i].tagName=="H4"){
                console.log("-h4");
                h=0;
            }
        }else if(tree[i].tagName=="H4"){
            console.log("h4");
        }
    }
}

Answer 1

var catalogue = (function () {
    var data = []

    function parse (nodes, cb) {
        Array.prototype.forEach.call(nodes, function (node) {
            if (cb) {
                cb(data, node)
            } else {
                var tag = node.tagName
                var text = node.innerText
                var children = node.children
                if (/^h\d$/i.test(tag)) {
                    data.push({
                        tag: tag.toLowerCase(),
                        text: text
                    })
                }
            }
            if (children.length) {
                parse(children, cb)
            }
        })
    }

    function generate (cb) {
        var doms = []
        data.forEach(function (item) {
            var dom = document.createElement(item.tag)
            if (cb) {
                cb(doms, dom)
            } else {
                dom.className = 'catalogue-' + item.tag
                dom.innerText = item.text
                doms.push(dom)
            }
        })
        return doms
    }

    return {
        parse,
        generate
    }
})()

<script>
    function main (selector) {
        var nodes = document.querySelector(selector).children,
            doms
        catalogue.parse(nodes)
        doms = catalogue.generate()
        console.log(doms)
    }
    main('article')
</script>