window.onload = function() {
var ul1 = [], ul2 = [];
var span1 = [], span2 = [];
var selectNode;
bind_span1();
bind_span2();
var buttons = document.getElementsByTagName('button');
var type = document.getElementsByClassName("types")[0];
var nodes;
var node;
buttons[0].onclick = function() {
var flag = 0;
var first = 0;
var span = document.getElementsByTagName('span');
for (var i = 0; i < span.length; i++)
span[i].style.background = "white";
var a = document.getElementsByTagName('a');
for (var i = 0; i < a.length; i++)
a[i].style.background = "white";
var value = document.getElementsByTagName('input')[0].value;
nodes = [];
deepTraversal(type);
for (var i = 0; i < nodes.length; i++) {
if (nodes[i].firstChild != null && nodes[i].firstChild.nodeValue == value) {
if (first == 0) {
var ul = document.getElementsByClassName("types")[0].getElementsByTagName("ul");
for (var j = 0; j < ul.length; j++)
ul[j].style.display = "none";
var span = document.getElementsByTagName("span");
for (var j = 0; j < span.length; j++)
span[j].style.color = "#999999";
var a = document.getElementsByTagName('a');
for (var j = 0; j < a.length; j++)
a[j].style.color = "#999999";
first = 1;
}
if (nodes[i].parentNode.getAttribute("class") == "file") {
nodes[i].parentNode.parentNode.style.display = "block";
nodes[i].parentNode.parentNode.previousSibling.style.color = "red";
}
else if (nodes[i].parentNode.getAttribute("class") == "document") {
nodes[i].parentNode.parentNode.style.display = "block";
nodes[i].parentNode.parentNode.parentNode.parentNode.style.display = "block";
nodes[i].parentNode.parentNode.previousSibling.style.color = "red";
nodes[i].parentNode.parentNode.parentNode.parentNode.previousSibling.style.color = "red";
}
nodes[i].style.background = "blue";
flag = 1;
}
}
if (flag == 0)
alert("Not found!");
}
buttons[1].onclick = function() {
if (selectNode == null) {
alert("Please select a node!");
return;
}
var value = document.getElementsByTagName('input')[0].value;
var next = selectNode.nextSibling;
for (var i = 0; i < next.children.length; i++) {
if (next.children[i].firstChild.firstChild.nodeValue == value) {
alert("Already exists");
return;
}
}
nodes = [];
deepTraversal(type);
if (selectNode.parentNode.getAttribute("class") == "type") {
var parent = selectNode.nextSibling;
var textNode = document.createTextNode(value);
var spanNode = document.createElement("span");
spanNode.appendChild(textNode);
var ulNode = document.createElement("ul");
var liNode = document.createElement("li");
liNode.setAttribute("class", "file")
liNode.appendChild(spanNode);
liNode.appendChild(ulNode);
parent.appendChild(liNode);
bind_span1();
bind_span2();
}
else if (selectNode.parentNode.getAttribute("class") == "file") {
var parent = selectNode.nextSibling;
var textNode = document.createTextNode(value);
var aNode = document.createElement("a");
var liNode = document.createElement("li");
aNode.setAttribute("href", "#");
aNode.appendChild(textNode);
liNode.setAttribute("class", "document");
liNode.appendChild(aNode);
parent.appendChild(liNode);
bind_span2();
}
alert("Add Successfully!");
}
buttons[2].onclick = function() {
var flag = 0;
var value = document.getElementsByTagName('input')[0].value;
nodes = [];
deepTraversal(type);
for (var i = 0; i < nodes.length; i++) {
if (nodes[i].firstChild != null && nodes[i].firstChild.nodeValue == value) {
var parent = nodes[i].parentNode;
for (var j = 0; j < parent.children.length; j++)
parent.removeChild(parent.children[j]);
parent.parentNode.removeChild(parent);
flag = 1;
}
}
bind_span1();
bind_span2();
if (flag == 1)
alert("Delete Successfully!");
else
alert("Not found!");
}
function bind_span1() {
ul1 = [];
span1 = [];
var types = document.getElementsByClassName("types");
for (var i = 0; i < types.length; i++) {
var span = types[i].getElementsByTagName("span");
var ul = types[i].getElementsByTagName("ul");
for (var j = 0; j < span.length; j++)
span1.push(span[j]);
for (var j = 0; j < ul.length; j++)
ul1.push(ul[j]);
}
for (var i = 0; i < span1.length; i++) {
span1[i].onclick = function() {
selectNode = this;
for (var j = 0; j < span1.length; j++)
span1[j].style.color = "#999999";
this.style.color = "red";
for (var j = 0; j < ul1.length; j++)
ul1[j].style.display = "none";
this.nextSibling.style.display = "block";
};
}
}
function bind_span2() {
ul2 = [];
span2 = [];
var files = document.getElementsByClassName("files");
for (var i = 0; i < files.length; i++) {
var span = files[i].getElementsByTagName("span");
var ul = files[i].getElementsByTagName("ul");
for (var j = 0; j < span.length; j++)
span2.push(span[j]);
for (var j = 0; j < ul.length; j++)
ul2.push(ul[j]);
}
for (var i = 0; i < span2.length; i++) {
span2[i].onclick = function() {
selectNode = this;
for (var j = 0; j < span2.length; j++)
span2[j].style.color = "#999999";
this.style.color = "red";
for (var j = 0; j < ul2.length; j++)
ul2[j].style.display = "none";
this.nextSibling.style.display = "block";
};
}
}
function deepTraversal(rootNode) {
if (rootNode != null) {
nodes.push(rootNode);
var children = rootNode.children;
for (var i = 0; i < children.length; i++)
deepTraversal(children[i]);
}
}
}
【ife】任务二十五:JavaScript和树(四)
最新推荐文章于 2019-07-27 11:11:05 发布