SOURCE

console 命令行工具 X clear

                    
>
console
window.onload = () => {
    var tree = document.getElementById('tree');
    var log = tree;

    //console.log(log);
}

var expanad = (that) => {
    var children = that.nextElementSibling;
    if (children) {
        var display = children.style.display;
        if (display=='none') {
            children.style.display = 'block';
            if (that.parentElement.classList) that.parentElement.classList.add('expanad');
        }else {
            children.style.display = 'none';
            if (that.parentElement.classList) that.parentElement.classList.remove('expanad');
        }
    }else{
        var ol = document.createElement('ol');
        var li = document.createElement('li');
        var a = document.createElement('a');
        a.innerText = '+新建分支';
        a.setAttribute('onclick', 'add(this)');
        li.classList.add('add');
        li.appendChild(a);
        ol.appendChild(li);
        that.parentElement.appendChild(ol);
        that.parentElement.classList.add('expanad');
        elem = that;
    }
}

var add = (that) => {
    var newtitle = prompt('新建分支名称','').trim();
    if (newtitle) {
        var li = document.createElement('li');
        var a = document.createElement('a');
        a.innerText = newtitle;
        a.classList.add('fenzhi');
        a.setAttribute('onclick', 'expanad(this)');
        var a1 = document.createElement('a');
        a1.innerText = 'X';
        a1.classList.add('del');
        a1.setAttribute('onclick', 'del(this)');
        var a2 = document.createElement('a');
        a2.innerText = 'R';
        a2.classList.add('rename');
        a2.setAttribute('onclick', 'rename(this)');
        li.appendChild(a2);
        li.appendChild(a1);
        li.appendChild(a);
        that.parentElement.parentNode.insertBefore(li, that.parentElement);
    }
}

var del = (that) => {
    var del = confirm('确认要删除?')
    if (del) that.parentElement.remove();
}

var rename = (that) => {
    var that2 = that.parentElement.children[that.parentElement.children.length-1];
    if (that2.localName != 'a') that2 = that.parentElement.children[that.parentElement.children.length-2];
    var newname = prompt('重命名', that2.innerText).trim();
    if (newname) that2.innerText = newname;
}

var analyze = () => {
    var tree = document.getElementById('tree');
    var text = '';
    var analyzeTree = (parent,rank) => {
        for(var i=0; i<parent.children.length; i++){
            var child = parent.children[i];
            if (child.localName != 'li') continue;
            for(var j=0; j<child.children.length; j++){
                var child2 = child.children[j];
                switch (child2.localName){
                    case 'ol': analyzeTree(child2,rank+1); continue;
                    case 'a': {
                        if (child2.classList.contains('fenzhi')) {
                            if (text != '') text += '\n';
                            for(var k=0; k<rank; k++) text += '\t';
                            text +=  rank + '.' + child2.innerHTML;
                        }
                    }
                    break;
                }
            }
        }
    };
    analyzeTree(tree,1);

    var form = document.getElementById('form1');

    form.querySelector('textarea[name=result]').value = text;
}

var elem;
<ol id="tree">
    <!-- <li><a class="del" onclick="del(this)">X</a><a class="rename" onclick="rename(this)">R</a><a onclick="expanad(this)" >分支</a></li>
    <li><a onclick="expanad(this)">分支</a></li>
    <li class="expanad">
        <a onclick="expanad(this)">分支</a>
        <ol>
            <li><a onclick="expanad(this)">分支</a></li>
            <li><a onclick="expanad(this)">分支</a></li>
            <li class="expanad">
                <a onclick="expanad(this)">分支</a>
                <ol>
                    <li><a onclick="expanad(this)">分支</a></li>
                    <li><a onclick="expanad(this)">分支</a></li>
                    <li>
                        
                    </li>
                </ol>   
            </li>
        </ol>   
    </li> -->
    <li class="add"><a onclick="add(this)">+新建分支</a></li>
</ol>
<hr/>
<div>
    <form class="m-form" id="form1">
        <div>
            <input type="button" value="解析流程结构" onclick="analyze()" />
        </div>
        <div>
            <textarea name="result"></textarea>
        </div>
    </form>
</div>
ol {
}
li {
    border-top: 1px solid gray;
    /* overflow: hidden; */
}
li.expanad {
    border-left: 1px solid gray;
}
/* li::before {
    content: "▶";
    color: black;
    transform: rotate(90deg);
}
li.expanad::before {
    content: "◀";
    color: black;
} */
li>a {
    padding: 1px 4px;
    cursor: pointer;
}
li>a:hover {
    color: blue;
}
li.add a {
    color: gray;
    font-size: 0.9rem;
}
li a.del {
    color: red;
}
li a.rename {
    color: orange;
}
li a.del,li a.rename {
    float: right;
    padding: 1px 3px;
    border: 1px solid gray;
}
.m-form textarea {
    width: 99%;
    height: 200px;
}