JS实现数的遍历，查询，增加节点，删除节点

来源：互联网发布：淘宝怎么才能搜到黄盘编辑：程序博客网时间：2024/05/21 19:27

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Task-2-25</title>
<style type="text/css">
html, body {
width: 60%;
height: 100%;
text-align: center;
margin: 0 auto;
}
button {
border:0;
box-shadow: 3px 3px 10px rgba(0,0,0,0.5);
padding: 4px;
margin:20px 5px;
cursor: pointer;
background-color: #fff;
}
button:active {
box-shadow: 0 0 5px rgba(0,0,0,0.5);
}
div {
padding: 10px;
margin: 10px;
border: 1px solid #000;
background-color: #fff;
color: #000;
cursor: pointer;
text-align: left;
}

/*.noshow>div{
display: none;
}*/
a{
display: inline-block;
text-decoration: none;
width: 1em;
line-height: 1;
border: 1px solid black;
text-align: center;
margin: 0 6px 0 0;
float: left;
}

.selected{
background-color: rgb(210,210,210);
}
.default{
background-color: #fff;
color: black;
}
.active {
background-color: blue;
color: #fff;
}
.found {
background-color: red;
color: #fff;
}
</style>
</head>
<body>
<input />
<button>深度优先搜索</button>
<button>查询</button>
<input />
<button>添加节点</button>
<button>删除节点</button>
<section>
<div id="box-container">
<div id="root">
产品<a class="display" href="javascript:;">-</a>
<div class="noshow">手机<a class="display" href="javascript:;">+</a>
<div>Apple<a class="display" href="javascript:;">-</a>
<div>iphone4s</div>
<div>iphone5s</div>
<div>iphone6s</div>
<div>iphone6Plus</div>
</div>
<div>Samsung<a class="display" href="javascript:;">-</a></div>
<div>Xiaomi<a class="display" href="javascript:;">-</a></div>
</div>
<div class="noshow">电脑<a class="display" href="javascript:;">+</a>
<div>PC<a class="display" href="javascript:;">-</a></div>
<div>NoteBook<a class="display" href="javascript:;">-</a></div>
<div>SoftWare<a class="display" href="javascript:;">-</a></div>
</div>
<div class="noshow">家电<a class="display" href="javascript:;">+</a>
<div>电视<a class="display" href="javascript:;">-</a></div>
<div>冰箱<a class="display" href="javascript:;">-</a></div>
<div>空调<a class="display" href="javascript:;">-</a></div>
</div>
</div>
</div>
</section>
<script>
var traverse = []; //存放遍历结果
var search = []; //存放搜索结果
var timer;

var aFlag = [];
//遍历树
function preOrder(tree) {
if (tree !== null) {
traverse.push(tree);
for (var i = 0; i < tree.children.length; i++) {
preOrder(tree.children[i]);
}
}
}
//搜索树
var tag = true; //标记是否搜索到，搜索到为false
function searchTree(tree, content) {
var equal = (tree.innerHTML.split('<')[0].replace(/(^\s+)|(\s+$)/g, "") === content);
if (!equal && tag) {
search.push(tree);
for (var i = 0; i < tree.children.length; i++) {
searchTree(tree.children[i], content);
}
} else if (equal) {
search.push(tree);
tag = false;
return;
}
}
window.onload = function() {
var domTree = document.getElementById('root');
var Input=document.getElementsByTagName("input");
var oBtns=document.getElementsByTagName("button")
oBtns[0].onclick = function() {
clearResult();
preOrder(domTree);
animate(traverse, 2);
};
oBtns[1].onclick = function() {
var content = Input[0].value;
if (content === '') {
alert('请填写要搜索的内容');
} else {
clearResult();
searchTree(domTree, content);
if (!tag) { //查询成功
animate(search, 1);
} else { //无该搜索结果
animate(search, 3);
}
}
};
//点击相应的box背景变色
var selectDiv;//记录选中的box
var levels = document.getElementById('box-container').getElementsByTagName('div');
for (var i = 0; i < levels.length; i++) {
levels[i].onclick = function(e) {
clearResult();
this.style.backgroundColor = '#fef9d1';
e.stopPropagation();//阻止事件冒泡
selectDiv = this;
};
}
//删除选中box及其子节点
oBtns[3].onclick = function(){
if(selectDiv === undefined){
alert('请先选中要删除的节点');
}else{
var parent = selectDiv.parentNode;
parent.removeChild(selectDiv);

}
};
//在选中节点下增加子节点
oBtns[2].onclick = function(){
var content = Input[1].value;
if(content === ''){
alert('请填写新增节点的内容');
}else if(selectDiv === undefined){
alert('请先选中要操作的节点');
}else{
var newDiv = document.createElement('div');
newDiv.innerHTML = content + "<a class=\"display\" href=\"javascript:\;\">+</a>";
newDiv.className = 'level-';
selectDiv.appendChild(newDiv);

//更新点击事件
levels = document.getElementById('box-container').getElementsByTagName('div');
for (var i = 0; i < levels.length; i++) {
levels[i].onclick = function(e) {
clearResult();
this.style.backgroundColor = '#fef9d1';
e.stopPropagation();//阻止事件冒泡
selectDiv = this;

};
}
}
}
}
//清理前一个遍历或搜索
function clearResult() {
var allDiv = document.getElementsByTagName('div');
for (var i = 0; i < allDiv.length; i++) {
allDiv[i].style.backgroundColor = '#fff';
}
clearInterval(timer);
traverse = [];
search = [];
tag = true;
}
//将遍历或搜索结果用动画展示
//searchOrTraverse:1-search,2-traverse,3-search no result
function animate(result, searchOrTraverse) {
var i = 0;
result[i].style.backgroundColor = '#fec8b0';
timer = setInterval(function() {
i++;
if (i < result.length) {
result[i - 1].style.backgroundColor = '#fff';
result[i].style.backgroundColor = '#fec8b0';
} else if (searchOrTraverse === 1) {
clearInterval(timer);
result[result.length - 1].style.backgroundColor = '#593c7f';
} else if (searchOrTraverse === 2) {
clearInterval(timer);
result[result.length - 1].style.backgroundColor = '#fff';
} else if (searchOrTraverse === 3) {
clearInterval(timer);
result[result.length - 1].style.backgroundColor = '#fff';
alert('没查询到该搜索内容');
}
}, 500);
}

</script>
</body>
</html>

0 0