任务目的

熟练JavaScript
学习树这种数据结构的基本知识

任务描述

基于上个任务，添加节点的选择、增加与删除的功能
点击某个节点元素，则该节点元素呈现一个特殊被选中的样式
增加一个删除按钮，当选中某个节点元素后，点击删除按钮，则将该节点及其所有子节点删除掉
增加一个输入框及一个“添加”按钮当选中某个节点元素后，点击增加按钮，则在该节点下增加一个子节点，节点内容为输入框中内容，插入在其子节点的最后一个位置

整体思路

首先在原来的页面中增加两个button用于增加和删除节点，同时添加一个input获取用户添加节点的名称。

<input type="text" id="searchValue">
<button id="dlr">深度优先模拟前序遍历</button>
<button id="ldr">深度优先模拟中序遍历</button>
<button id="lrd">深度优先模拟后序遍历</button>
<button id="bfs">广度优先遍历</button>
<span>文本框为空时只进行遍历。如果需要搜索，请在文本框中输入要查询的内容</span>
<br>
<button id="delNode">删除选中的节点</button>
<input type="text" id="newNode" value="新节点">
<button id="addNode">点击增加节点</button>

然后给页面中的所有节点添加点击事件，用于标注哪个节点被用户选中。

function clickHandler(){
    //清除上一个
    if(clickedNode){
        clickedNode.classList.remove("clicked");
    }
    var e = event.target;
    if(e){
        e.classList.add("clicked");
        clickedNode = e;
    }
}
//给所有节点添加点击事件
function nodeClick(){
    var tree = $("#tree_wrap");
    addHandler(tree,"click",clickHandler);
}

当用户点击删除按钮后，调用删除函数即可

//删除节点
function delNode(){
    var node = $(".clicked");
    if(node){
        var parent = node.parentNode;
        parent.removeChild(node);
    }
}

如果用于点击添加按钮，调用添加函数，将新增的节点作为被选中节点的子节点添加到节点树中

//增加节点
function addNode(){
    var newNodeText = $("#newNode").value.trim();
    var node = $(".clicked");
    if(newNodeText && node){
        var newNode = document.createElement("div");
        var text = document.createTextNode(newNodeText);
        newNode.appendChild(text);
        node.appendChild(newNode);
    }
}

其他函数：

//渲染数据
function renderData(){
    var value = $("#searchValue").value.trim();
    //清除颜色
    for(var i=0;i<nodeArray.length;i++){
        // nodeArray[i].style.color = "#000";
        nodeArray[i].classList.remove("searched");
    }
    var timer = null,i=0,isSeached = false;
    timer = setInterval(run,500);
    function run(){
        isRun = true;
        if(i<nodeArray.length){
            if(i-1 > -1){
                //清除上一个节点的背景色
                // nodeArray[i-1].className = "";
                nodeArray[i-1].classList.remove("selected");
            }
            // nodeArray[i].className = "selected";
            nodeArray[i].classList.add("selected");
            if(value){
                var nodeValue = nodeArray[i].firstChild.nodeValue.trim();
                if(value == nodeValue){
                    // nodeArray[i].style.color = "red";
                    nodeArray[i].classList.add("searched");
                    isSeached = true;
                }
            }
            i++;
        }else{
            //清除最一个节点的背景色
            // nodeArray[i-1].className = "";
            nodeArray[i-1].classList.remove("selected");
            //判断是否被找到
            if(value && !isSeached){
                alert("没有找到");
            }
            nodeArray = [];
            isRun = false;
            clearInterval(timer);
            return;
        }
    }
}

//按钮handler
function btnHandler(){
    if(isRun){
        alert("等会儿");
    }else{
        var tree = $("#tree_wrap");
        var id = event.target.id;
        switch(id){
            case 'dlr':
                dlr(tree);
                break;
            case 'ldr':
                ldr(tree);
                break;
            case 'lrd':
                lrd(tree);
                break;
            case 'bfs':
                bfs(tree);
                break;
        }
        renderData();
    }

}

最终代码

最终代码
 demo

忙。。。时间太宝贵了